Install Auth0 React SDK and Create Auth0Provider with Access to Session History
Install the Auth React SDK on the terminal
npm install @auth0/auth0-react
Create an auth0-provider-with-navigate.js file in the src folder.
Add the following code.
import { Auth0Provider } from "@auth0/auth0-react";
import React from "react";
import { useNavigate } from "react-router-dom";
export const Auth0ProviderWithNavigate = ({ children }) => {
const navigate = useNavigate();
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const redirectUri = process.env.REACT_APP_AUTH0_CALLBACK_URL;
const onRedirectCallback = (appState) => {
navigate(appState?.returnTo || window.location.pathname);
};
if (!(domain && clientId && redirectUri)) {
return null;
}
return (
<Auth0Provider
domain={domain}
clientId={clientId}
authorizationParams={{
redirect_uri: redirectUri,
}}
onRedirectCallback={onRedirectCallback}
>
{children}
</Auth0Provider>
);
};
Wrap the Auth0ProviderWithNavigate component around the App component inside of index.js to give it access to the Auth0Context.
Auth0ProviderWithNavigate needs the BrowserRouter component from React Router to be its parent, grandparent, or great-great-great-grandparent.
Man: [0:01] On the terminal, I'm going to install the Auth0 React SDK by typing in npm install auth0/auth0-react. The Auth0 SDK uses React Context.
[0:19] It gives you an Auth0Provider that passes Auth0Context to child components. To pass the Context down, you would add the Auth0Provider to the root component. An index.js will wrap the app component in a Auth0Provider.
[0:39] The Auth0Provider, from the React SDK, remembers the route that the user wanted to access and if the authentication is successful, it takes the user to that route. The Auth0Provider needs to have access to the session history of the application. This daughter application uses React Router v6 to manage its routing.
[1:09] React Router has the useNavigate hook to access the session history through the history object. I'm going to delete this Auth0Provider that we were using as a placeholder. In the source directory, let's create a new file called Auth0ProviderWithNavigate.
[1:29] First, I'm going to import the Auth0Provider from the Auth0 SDK. Then I'm going to import React from React. Then I'm going to import the useNavigate hook from React Router DOM. Next, we'll create a component called Auth0ProviderWithNavigate. UseNavigate returns a function to let you navigate promatically. We want to call that function, Navigate.
[2:09] Next, I'm going to make sure that the Auth0 SDK, it's connected to the correct application. I'm going to grab the Auth0 Domain, the Auth0 Client ID, and the redirect URL from the environment variables.
[2:30] Next, I'm going to create an onRedirectCallback function to handle the event where Auth0 redirects your users from the Auth0 Universal Login back to your React application. Now I'm going to call the Navigate function. Then I'm going to pass in where I want the application to navigate to.
[2:53] First, I'll check if appState is available using optional chaining. We will set the appState.returntovalue in a further lesson. If appState doesn't exist, then we will use window.location.pathname. Then I'm going to check if the values for Domain, Client ID, and redirect URI are all true.
[3:20] If any of them are not true, then we're just going to return null. Then finally, I'm going to return the Auth0Provider with some props. The first prop is Domain, which we will set to domain. The next prop is client ID, which we will set to clientId.
[3:49] Next, we'll set authorizationParams which is an object that defines the query parameter that will be sent along during the call to the Auth0 authorized endpoint. The key will be redirect_uri and the value will be redirectUri. Then the final point will be on RedirectCallback. Then make sure I add the children. Then make sure that I hit save.
[4:19] Now, let's head over to the index.js file. At the top of the file, let's import the Auth0ProviderWithNavigate component that we just created. In order for Auth0ProviderWithNavigate to be able to use the useNavigate hook from React Router, it has to be a child component of BrowserRouter.
[4:41] Let's make sure that we wrap the Auth0ProviderWithNavigate component around the app component, but inside of BrowserRouter. Now the connection between the Auth0 React SDK and the React application is complete.