Redirect User After Login with Auth0 Actions

Will Johnson
InstructorWill Johnson
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

You can use the post-login Action to redirect users before an authentication transaction is complete. This lets you implement custom authentication flows that require additional user interaction beyond the standard login form.

Call api.redirect.sendUserTo() with the URL you want to redirect to as a string

After the redirect, in your app resume authentication by redirecting the user to the /continue endpoint and include the state parameter from the URL.

If you don't send the original state back to the /continue endpoint, Auth0 will lose the context of the login transaction and the user will not be able to log in.

In your application redirect to: https://{yourAuth0Domain}/continue?state=abc123

After the user has been redirected to the /continue endpoint, the Action will resume by calling the onContinuePostLogin function.

For redirects to work properly, you must have a uncomment the onContinuePostLogin function even if the function is empty.

Check if the user has seen the announcement

  if (!event.user.app_metadata[''announcement_seen'']) {
    api.redirect.sendUserTo("http:://localhost:3000/announcement");
  }
};

If the user hasn't seen the announcement set the app_metadata

exports.onContinuePostLogin = async (event, api) => {
  api.user.setAppMetadata('announcement_seen', true);
};

Instructor: [0:01] With Actions, you may want to redirect a user when they login to another page. That can be to look at a special announcement, to sign a privacy policy, to enhance their profile by entering more information and the post login trigger allows you to do this with Auth0. [0:20] For this example, I'm going to redirect to a announcement page. On the views folder, I created an announcement.js file, which is a function component with the header, a special announcement, text of Rafael is the best Ninja Turtle, and a link to continue to the app.

[0:37] Right now, it's set to the home page when a user logs in. Then App.js, I imported announcement from View/Announcement and created a path in React router for the announcement path.

[0:51] Back on the Auth0 Dashboard, go to actions, library, click build custom. We'll name this redirect and make sure it's a post-login trigger. The runtime will be node16.

[1:08] Let's click create. We'll be taken to the actions editor on the on execute post-login function. Let's type api.redirect.sendUserTo. We enter the url as a string. This would be http://localhost:3000/announcement.

[1:33] The next thing we want to do is make sure we deploy this action. Then, let's add it to the flow. Drag redirect in between the login flow. As you see, this will interrupt the login flow before the token is issued. Then click apply.

[1:52] Let's go back to the sample application. Type in npm run start. OK, the application is running. Let's log in, going to log in with Google this time, and we have the special announcement.

[2:20] Once you click continue to app, it will bring you back to the home page but not log you in. In order to resume the authentication flow, after the redirect, you have to direct the users to a continue endpoint from your application. We'll do that in announcement.js. Let's import useState from react. I'm going to paste in some code, and we're going to go over it.

[3:00] We're going to use the URLSearchParams object to create a new instance called searchParams. We're going to pass in document.location.search in order to get access to the query string. When someone logs in, in the URL, they will get a query called state. We need to pass that state into the continueUrl.

[3:26] We're going to create a new variable called state and call it by searchParams.get. State is the value we're going to get from the URL. Then we'll create some state called continueUrl. You will use your Auth0 domain/continue and then the state value that you would get from the query string.

[3:47] Now I'm going to direct the href from continue app to the continueUrl. Make sure that's saved in your application. Back on the flow editor and the Auth0 Dashboard, click on redirect and then click where it says "Here" to update the action.

[4:07] If you scroll down on the editor, you will see there's a function commented out at the bottom called onContinuePostLogin. In order for the redirect to work onContinuePostLogin must be uncommented. It doesn't matter if the function is empty. It has to be there in order for the action to pick up context and continue the authentication flow.

[4:31] Make sure that you click deploy. Let's login. It's going to take me to the Special Announcement. I'll click continue to app. Now I'm logged in. I'm on the profile page and I'm able to log out.

[4:55] It would probably be annoying to a user if every time they logged in, they saw the exact same announcement page. So now let's go back to the redirect action and make some checks to see if they've seen the page or not. Let's type in if, then use a bang, event.user.app_metadata. Then, it will check the value for 'announcement_seen'.

[5:34] Now, when the user logs in, it will check if the value of 'announcement_seen' is 1 or . If 'announcement_seen' is set in the app_metadata, then it will redirect the user to localhost:3000/announcement.

[5:50] If the user does get redirected, then we want to scroll down to onContinuePostLogin and run api.user.setAppMetadata. We're going to set the value of 'announcement_seen' to 1. Make sure you deploy the action.

[6:14] Let's go back to the application and make sure that is running. Click Log in, Continue with Google. Then, we see the Special Announcement page. Then, we click Continue to app. Let's log this user out. Let's log them in again. Continue with Google. I did not see the announcement page again.

[6:51] Back on the Auth0 dashboard, you can go to User Management, Users, the user that we just logged, scroll down. Their app_metadata has "announcement_seen" set to 1.

egghead
egghead
~ 22 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today