Login/logout events with @auth0/auth0-react?

Get Help
,
1

Hello,
I use @auth0/auth0-react and I would like to display a welcome message (like “Hello user.nickname”) after a login and eventually store welcome=true in localStorage to prevent same message again when reloading the page.
But I can’t find the right event or hook to do something like that.
I tried onRedirectCallback on the Auth0Provider component but I don’t have the context of the user yet.
I tried useEffect hook on user value but I can’t remove welcome=true when the user logout.

Are there any events to do this? Like onLogin/onLogout or something like that ?

Thanks.

3

Hi @jeanpascal,

Welcome to the Community!

You could add a custom claim to the user’s ID Token to inform your app if it is the first time they have logged in by using a rule:

function(user, context, callback) {
  const namespace = 'https://your-app.com/';
  context.idToken[namespace + 'firstLogin'] = (context.stats || {}).loginsCount == 0;
  callback(null, user, context);
}

And then in your app you could conditionally display the message if the value of user['https://your-app.com/firstLogin'] is true.

4

Thank you for your answer !
But it is not exactly what I would like to do.
I would like to have a “Welcome user.nickname” on every successful login (on my webapp).
I could easily do that with some onSuccessLogin event on the Auth0Provider component of the @auth0/auth0-react package (but I don’t find this type of event).

5

Oh I see! Since the onRedirectCallback runs after login, you could add a query string param to the URL:

  onRedirectCallback = (appState) => {
    const redirectUri = `${appState?.returnTo || window.location.pathname}?welcome=true`;
    this.props.history.push(redirectUri);
  };

  render() {
    return (
      <Auth0Provider
        domain={this.domain}
        clientId={this.clientId}
        redirectUri={window.location.origin}
        onRedirectCallback={this.onRedirectCallback}
        audience={this.audience}
      >
        {this.props.children}
      </Auth0Provider>
    );
  }

And then in your component check for the param:

const showWelcome = (window.location.search || '').includes('welcome');
6

Thanks I will try that !