Redirect User After Login with Auth0 Actions

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.