Avoiding surprises with RefreshTokens and unexpected re-renders

[ronnybremer]

Using yew-oauth2 now for a while I encountered a little snag when dealing with refresh tokens. So I thought I share my experiences here in case they might help others.

Consider a simple app, which requires you to login. You probably set up a global context holding the current authentication information, like user name, access token and maybe display name.

This might look like this:

#[derive(Clone, Debug)]
pub struct AppState {
    token: Option<String>,
    user_name: Option<String>,
}

impl AppState {
    pub fn get_access_header(&self) -> String {
        if self.token.is_some() {
            "Bearer ".to_string() + &self.token.clone().unwrap()
        } else {
            "".to_string()
        }
    }
    pub fn get_user_name(&self) -> Option<String> {
        self.user_name.clone()
    }
}

pub enum AppStateAction {
    Login(String, String),
    UpdateToken(String),
    Logout,
}

impl Reducible for AppState {
    type Action = AppStateAction;

    fn reduce(self: Rc<Self>, action: Self::Action) -> Rc<Self> {
        match action {
            AppStateAction::Login(
                token,
                user_name,
            ) => Self {
                token: Some(token),
                user_name: Some(user_name),
            }
            .into(),
            AppStateAction::UpdateToken(token) => Self {
                token: Some(token),
                user_name: self.user_name.clone(),
            }
            .into(),
            AppStateAction::Logout => Self {
                token: None,
                user_name: None,
            }
            .into(),
        }
    }
}

The AppContext is then inherited throughout the app and can be accessed in function components and structural components.
Whenever the OAuth2Context changes, an action will be sent to the reducer, AppStateAction::Login if the context is authenticated or AppStateLogout otherwise. Also a log out button is sending the latter to the reducer.

Yew will automatically re-render all sub components of the AppContext on any such change.

However, as soon as you start to use RefreshTokens you will notice, that a re-render also happens whenever a new token has been received. Which makes sense, as every sub component needs to get the new token, so they would re-render. But this isn't particularly user friendly. Consider you are filling out a form, typing a message in a text box or watching a video. The token refreshes and you form will reset or your video will start from the beginning.

Luckily, Yew is offering the use_reducer_eq hook, which according to the documentation will only re-render, when PartialEq on the AppContext returns false.
So the obvious approach would lead you to:

// don't re-render when only the token changes but the user_name stays the same
impl PartialEq for AppState {
    fn eq(&self, other: &Self) -> bool {
        self.user_name == other.user_name
    }
}

This will effectively suppress the re-render as intended, however, it will also prevent the token from getting updated. Even though the reduce() function above returns a new AppContext on AppStateAction::UpdateToken, it appears to not get used by existing sub components.

After reaching out on the always helpful Discord channel of Yew, @WorldSEnder pointed me in the right direction. To summarize:

The reducer will use the new value of AppContext returned by the AppStateAction::UpdateToken match arm, however, the already rendered components will still point to the old instance of AppContext, therefore using the old token. A re-render would fix that, but with the unwanted side effects discussed. In order to replace the token correctly, interior mutability needs to be used.

So this is the code which I am using now and it remedies the issue. token inside of AppContext is replaces by a RefCell, which can be mutated even on non-mutable self.

#[derive(Clone, Debug)]
pub struct AppState {
    token: RefCell<Option<String>>,
    user_name: Option<String>,
}

impl PartialEq for AppState {
    fn eq(&self, other: &Self) -> bool {
        self.user_name == other.user_name
    }
}

impl AppState {
    pub fn get_access_header(&self) -> String {
        if self.token.borrow().is_some() {
            "Bearer ".to_string() + &self.token.borrow().clone().unwrap()
        } else {
            "".to_string()
        }
    }
    pub fn get_user_name(&self) -> Option<String> {
        self.user_name.clone()
    }
}

pub enum AppStateAction {
    Login(String, String),
    UpdateToken(String),
    Logout,
}

impl Reducible for AppState {
    type Action = AppStateAction;

    fn reduce(self: Rc<Self>, action: Self::Action) -> Rc<Self> {
        match action {
            AppStateAction::Login(
                token,
                user_name,
            ) => Self {
                token: RefCell::new(Some(token)),
                user_name: Some(user_name),
            }
            .into(),
            AppStateAction::UpdateToken(token) => {
                *self.token.borrow_mut() = Some(token);
                self
            }
            AppStateAction::Logout => Self {
                token: RefCell::new(None),
                user_name: None,
            }
            .into(),
        }
    }
}

The AppStateAction::UpdateToken match arm is replacing the value of the RefCell token and then returns self, thereby replacing the token on both the old instance of AppContext as well as the new instance (for re-renders or new components).

Re-renders don't happen until the user_name changes but the get_access_header() function will always return the most current token.