An easy to implement, adaptable authentication and authorization platform which basically makes your login box awesome.



auth0

Start by cloning the `spa_react_javascript_hello-world_react-router-6` repository on its starter branch:

```bash
git clone -b starter git@github.com:auth0-developer-hub/spa_react_javascript_hello-world.git
```

Change your current directory to `spa_react_javascript_hello-world_react-router-6`

```bash
cd spa_react_javascript_hello-world
```

Install the project dependencies

```bash
npm install
```

Run the React application on `http://localhost:4040`

```bash
npm start
```


Download Starter Application from Auth0 Developer Center

Click the **Create Application** button.

Sign up for a [free Auth0 account](https://a0.to/egghead-react) here. 

Add the name "React Code Sample" and select "Single Page Applications" and the application type then click **Create**

Click on the **Settings** tab of your Auth0 Application page, scroll down to "Application URIs" section, and fill in these values:

**Allowed Callback URLs**
http://localhost:4040/

**Allowed Logout URLs**
http://localhost:4040

**Allowed Web Origins**
http://localhost:4040

Scroll down and click the **Save Changes** button.

On the "Basic Information" section get the Auth0 Domain and Auth0 Client ID values and paste them a `.env` file in the root of the project.

```env
REACT_APP_AUTH0_DOMAIN=AUTH0-DOMAIN
REACT_APP_AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:4040/
```





react

Link Auth0 Application to React Application

Install the Auth React SDK on the terminal 

```bash
npm install @auth0/auth0-react
```

Create an `auth0-provider-with-navigate.js` file in the src folder.

Add the following code.

```js
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.


Install Auth0 React SDK and Create Auth0Provider with Access to Session History

Create a buttons folder the src/components folder

Create a `login-button.js` file and add the following code:

```js
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";

export const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();

  const handleLogin = async () => {
    await loginWithRedirect({
      appState: {
        returnTo: "/profile",
      },
    });
  };

  return (
    <button className="button__login" onClick={handleLogin}>
      Log In
    </button>
  );
};
```

`loginWithRedirect()` redirects to the Auth0 /authorize endpoint to start the authentication process. You can pass a configuration object to this method to customize the login experience.

Setting up the value of `appState.returnTo` to "/profile", you are telling the Auth0 React SDK to: When my users log in with Auth0 and return to my React application, take them to the "Profile" page.

If you don't set up this `appState.returnTo` option, your users will be redirected by default to the / path after they log in.

Apply useAuth0 hook and loginWithReditect to Add User Login to React Application

Create a `signup-button.js` file under the src/components/buttons folder

Add the following code:

```js
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";

export const SignupButton = () => {
  const { loginWithRedirect } = useAuth0();

  const handleSignUp = async () => {
    await loginWithRedirect({
      appState: {
        returnTo: "/profile",
      },
      authorizationParams: {
        screen_hint: "signup",
      },
    });
  };

  return (
    <button className="button__sign-up" onClick={handleSignUp}>
      Sign Up
    </button>
  );
};
```
Adding `authorizationParams` to the `loginWithRedirect()` configuration object with the `screen_hint ` property and a value of `signup` will take users from your React application to the sign-up page.

Pass authorizationParams to loginWithRedirect to Direct Users to Auth0 Sign Up

You can log out users from your React application by logging them out of their Auth0 sessions using the `logout()` method from the Auth0 React SDK.

Create a `logout-button.js` file in the src/components/buttons folder

Create a logout button component with the following code

```js
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";

export const LogoutButton = () => {
  const { logout } = useAuth0();

  const handleLogout = () => {
    logout({
      logoutParams: {
        returnTo: window.location.origin,
      },
    });
  };

  return (
    <button className="button__logout" onClick={handleLogout}>
      Log Out
    </button>
  );
};
```

The `logout() method from Auth0 React SDK clears the application session and redirects to the Auth0 /v2/logout endpoint to clear the Auth0 session.

You can pass an object argument to `logout()` to customize the logout behavior of the React application. You can define a `logoutParams` property on that object to define parameters for the /v2/logout call. This process is invisible to the user. 

Pass the `logoutParams.returnTo` option to specify the URL where Auth0 should redirect your users after they log out. 

Setting `logoutParams.returnTo` to `window.location.origin` will ensure that Auth0 redirects your users to your production URL that you add to the "Allowed Logout URLs" list.




End Auth0 User Session with the logout Method from useAuth0 Hook

The `isAuthenticated` value represents the authentication state of your users it's tracked by the Auth0 React SDK. This value returns `true` when the user has been authenticated and `false` they're when not. Use `isAuthenticated` to render UI elements conditionally depending on the authentication state of your users.

```js
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
import { LoginButton } from "../../buttons/login-button";
import { LogoutButton } from "../../buttons/logout-button";
import { SignupButton } from "../../buttons/signup-button";

export const NavBarButtons = () => {
  const { isAuthenticated } = useAuth0();

  return (
    <div className="nav-bar__buttons">
      {!isAuthenticated && (
        <>
          <SignupButton />
          <LoginButton />
        </>
      )}
      {isAuthenticated && (
        <>
          <LogoutButton />
        </>
      )}
    </div>
  );
};
```
Authentication process doesn’t happen in your React application when using Auth0. Your React application will redirect your users to the Auth0 Universal Login page. Auth0 asks for credentials and redirects the user back to your application with the result of the authentication.


Use the Value of isAuthenticated to Render Components Conditionality

In this lesson, we create an AuthenticationGuard file that uses the Auth0React SDK to protect React routes by requiring login. 

You need to create the AuthenticationGuard component, pass in a component prop, and use it to protect any React route. 

```js
import { withAuthenticationRequired } from "@auth0/auth0-react";
import React from "react";
import { PageLoader } from "./page-loader";

export const AuthenticationGuard = ({ component }) => {
  const Component = withAuthenticationRequired(component);

  return <Component />;
};
```

Will also demonstrates how to use the AuthenticationGuard component to protect the profile, and admin routes in the application. 

```js
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
import { Route, Routes } from "react-router-dom";
import { PageLoader } from "./components/page-loader";
import { AuthenticationGuard } from "./components/authentication-guard";
import { AdminPage } from "./pages/admin-page";
import { CallbackPage } from "./pages/callback-page";
import { HomePage } from "./pages/home-page";
import { NotFoundPage } from "./pages/not-found-page";
import { ProfilePage } from "./pages/profile-page";
import { ProtectedPage } from "./pages/protected-page";
import { PublicPage } from "./pages/public-page";

export const App = () => {

  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route
        path="/profile"
        element={<AuthenticationGuard component={ProfilePage} />}
      />
      <Route path="/public" element={<PublicPage />} />
      <Route
        path="/protected"
        element={<AuthenticationGuard component={ProtectedPage} />}
      />
      <Route
        path="/admin"
        element={<AuthenticationGuard component={AdminPage} />}
      />
      <Route path="/callback" element={<CallbackPage />} />
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
};

```

Use Auth0 component withAuthenticationRequired To Protect React Router 6 Routes

After a user successfully logs in, Auth0 sends an ID token to your React application. Auth0, uses ID Tokens to cache user profile information and give it to a client application. The caching of ID tokens can improve the performance and responsiveness of your React application.

You can use the data from the ID token to personalize the user interface of your application. The Auth0 React SDK decodes the ID token and stores its data in the user object from the `useAuth0()` React hook. 

Customize UI With ID Token Data From The useAuth0 Hook's User Object

Auth0 Actions are serverless developer tools you can use to customize your application login flows.


Custom Authentication Flows for Modern Applications with Auth0 Actions

Learn a collection of authentication and authorization topics with Auth0.

Auth0 Tips and Tricks 

Learn the fundamental building blocks of Authentication and Authorization on the web using the OAuth 2.0 protocol.

Add Github Login to Your Web App with OAuth 2.0

Secure React User Authentication with Auth0

https://app.egghead.io/api/v1/lessons/react-download-starter-application-from-auth0-developer-center/subtitles

Instructor: [0:01] The first thing you're going to do is clone the React starter application on its starter branch from the Auth0 Developer Center. Head over to the terminal and use the git clone -b starter command to clone the project on the starter branch. Then, once that's done, let's change directories into the starter application and then install the necessary dependencies.

[0:31] Then once the dependencies are installed, let's open up the project inside of VS Code. With the project open in VS Code, I'm going to open up a new VS Code terminal, then type in npm start. This will open up the React SAP application on localhost:4040. Now we're ready to add authentication with Auth0.

https://app.egghead.io/api/v1/lessons/react-download-starter-application-from-auth0-developer-center/transcript

Click the **Create Application** button. 

Sign up for a [free Auth0 account](https://a0.to/egghead-react) here.

Add the name "React Code Sample" and select "Single Page Applications" and the application type then click **Create**

Click on the **Settings** tab of your Auth0 Application page, scroll down to "Application URIs" section, and fill in these values:

**Allowed Callback URLs**
http://localhost:4040/

**Allowed Logout URLs**
http://localhost:4040

**Allowed Web Origins**
http://localhost:4040

Scroll down and click the **Save Changes** button.

On the "Basic Information" section get the Auth0 Domain and Auth0 Client ID values and paste them a `.env` file in the root of the project.

```env
REACT_APP_AUTH0_DOMAIN=AUTH0-DOMAIN
REACT_APP_AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:4040/
```



https://app.egghead.io/api/v1/lessons/auth0-link-auth0-application-to-react-application/subtitles

Instructor: [0:01] Next, let's head over to auth0.com and then login. If you don't have an Auth0 account, you can sign up for one in the description. One other thing is, if this your first time signing up for Auth0, you have to create what is called a tenant. This is where you will house your applications for your Auth0 account.

[0:23] Once you're on the Auth0 dashboard, let's create a new application. Let's go to Applications > Applications. Let's click on Create Application, and then for the name, we'll go React Code Sample. Then for the application type, let's choose Single Page Web Applications, since this is a React application, then click Create.

[0:51] Next, we're going to create the communication between Auth0 and the React application.

[1:02] Let's go to settings, and let's scroll down to application URIs. We're going to change allow callback URLs to localhost 4040. This will be the URL that the user will be redirected to after they authenticate with Auth0. Then next we'll go to allow logout URLs. Again we'll do localhost 4040. This is where the user will be redirected after they log out of Auth0 session.

[1:37] Then we'll scroll down to allowed web origins and we'll put localhost 4040 again as well. This is the URL that's making the request to Auth0 for the authentication request, so you put this here to avoid any course issues. Then we'll scroll down to save changes. Let's scroll up and pay attention to the domain and the client ID.

[2:07] In our React application in the route, let's create a .env file. Inside of the .env file, I'm going to paste in the values for the Auth0 domain, the client ID, and the callback URL. Back on the Auth0 dashboard, I'm going to copy the domain. Then I'm going to paste the domain here.

[2:30] Then back on the Auth0 dashboard, I'm going to copy the client ID and then paste the client ID here under React app Auth0 client ID. Then I'm going to click save. With that, the React application and Auth0 are able to communicate back and forth. Now the application is ready to be secured using Auth0.

https://app.egghead.io/api/v1/lessons/auth0-link-auth0-application-to-react-application/transcript

https://app.egghead.io/api/v1/lessons/auth0-install-auth0-react-sdk-and-create-auth0provider-with-access-to-session-history/subtitles

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.

https://app.egghead.io/api/v1/lessons/auth0-install-auth0-react-sdk-and-create-auth0provider-with-access-to-session-history/transcript

https://app.egghead.io/api/v1/lessons/auth0-apply-useauth0-hook-and-loginwithreditect-to-add-user-login-to-react-application/transcript

As a front-end developer, it's crucial to implement form validation, especially when building apps that involve user input. Two of the standout libraries in this domain are **React Hook Form** and **YUP**. 

- **React Hook Form** handles the form's state management and more.
- **YUP** is perfect for schema validation, allowing you to define and enforce specific data types for your form fields. 

Interestingly, there's a dedicated library to integrate both, ensuring a seamless user experience.

### YUP: Declaring Our Schema

Taking a sample form with fields like email, first name, and last name, we use YUP to define our schema. 

![example form](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698439266/tips/alejandro-roman/react_hook_form_example.png)

For instance:

```javascript
const schema = yup.object().shape({
  email: yup.string().email().required(),
  firstName: yup.string().matches(/^[A-Za-z]+$/, 'Only letters are allowed').required(),
  lastName: yup.string().required()
});
```

Here's a breakdown:

- For the email, we're using YUP's built-in validation for email strings with `.email()`.
- For the first name, we've added custom validation to ensure only letters are present with Regex and `.matches()`.
- The last name is kept as required.

yup also gives us an `InferType` function, which allows us to create a type for our schema. This is useful for declaring interfaces and types for our form fields.

```javascript
export type FormValues = yup.InferType<typeof schema>;
```

### React Hook Form: Managing Form State

With the schema set, we can utilize the power of the React Hook Form:

```javascript
const { register, handleSubmit, errors } = useForm({
  resolver: yupResolver(schema)
});
```

For every form field component, we `register` it with the React Hook Form:

```javascript
<Input 
  id="firstName" 
  {...register("firstName")}
  placeholder="First Name"
/>
```

I've also imported a `FormProvider` component, which allows us to nest components that have access to our hook form. This is useful for building custom components that we might not want to have in our form directly.

```javascript
<FormProvider {...formMethods}>
 // many nested form components
  ...
</FormProvider>
```

Components that want to access the hook form can use the `useFormContext` hook:

```javascript
const { register, formState: { errors } } = useFormContext<FormValues>();
```

React Hook Form provides us with a `formState` that exposes many values that we could want when building forms. Here I'm only using errors but you could also use `isDirty`, `isLoading`, `isSubmitted`, `touchedFields`, `defaultValues`, and more.

### Advanced: Watching Field Changes

React Hook Form provides a `watch` function, allowing us to monitor real-time changes in our form fields:

```javascript
const { firstName, lastName } = watch();
```

By doing so, we can dynamically display messages or perform certain actions based on user input.

### In Summary

With the combination of React Hook Form and Yup, managing and validating forms becomes a breeze. Whether it's a simple login screen or a comprehensive data entry form, these tools ensure robustness and user-friendly feedback.

Give them a try, and you'll likely find your form development process elevated to the next level.

https://app.egghead.io/api/v1/lessons/react-pass-authorizationparams-to-loginwithredirect-to-direct-users-to-auth0-sign-up/subtitles

Streamline Form Creation and Validation with React Hook Form and Yup

[00:00] So if you're a front-end developer and you're building apps that are form-heavy or just have a form here and there Even just a login screen, right? Like if you're building that yourself, you should really be using form validation And there's two libraries that I really like for that. One is called React Hook Form and the other one is called the YUP

[00:18] So React Hook Form does like a lot of your state management for the form But so much more than that and I'll show you some examples and then YUP is for schema validation, right? You can like declare your schema and you can enforce what types

[00:33] You want your schema to be in and they're just a match made in heaven so much that there is a library Dedicated to integrating both of them, right? So we're gonna like dive right in here and I'm gonna first start with YUP We're gonna go from the top to the bottom, right? So with YUP, we're gonna first declare our schema

[00:52] What do we do for declaring our schema? So we're gonna use this form that I have right here as an example and This form as you can see has an email a first name and a last name So what we're gonna do is we're gonna declare an object So yup that object and then we're gonna declare all our properties. So we have email first name last name

[01:12] Then we can declare what each type is, right? And some of them have really cool functions like dot email which brings out-of-the-box validation So for example email is gonna be type string and then string is gonna say we're gonna use the out-of-the-box Validation to say, okay

[01:29] this should be a valid email right like have an at sign have a dot-com things like that and Then we're gonna say if it's required or not required. So for example here we could say Last name is not required or is nullable for example But in this case, we're gonna keep that as required

[01:48] Second we can when it's required we can also pass a message. So I'm gonna have this little message object up here So missing field this field is required only letters. No numbers allowed, right? so First first name we have yup dot string. We could also do cool things here

[02:06] So for example, we could say like this string should match this regex, right or this specific validation Which which which we have up here, which is very simple Just let's not allow any numbers and then we can have a specific message in case those number

[02:21] You know, it has numbers or things like that and we can also do way more things, right? We can do conditionals relations, right? So for example, we could say we could have something like username and say okay if email is not is null We could have username be required things like that, which is really cool But I'll probably could do another video just for that

[02:41] Another cool thing is that we can have this thing called inferred type Which will basically create a type for us at which we can use in multiple places Just such as down right here And we just don't it's cool because you don't have to like recreate your types, right?

[02:58] Like you can have your schema from your schema also declare your types and interfaces So scrolling down now, we're gonna have this thing called form methods Which we can get from the use form hook which is provided by react hook form library Then this library right here. This function is called the upper solver

[03:16] Which is another package that we installed called hook form resolvers. Yep Which allows us to integrate? Yep with react hook form just disclaimer You could also be using Zod and there's a Zod resolver on which Zod is another validation library

[03:33] I just been using yup for like the past three years. So I'm like really used to it at this point So moving down from four methods, right we can get a few things from here, right? So again, I mentioned that it helps you manage the state for your library

[03:48] so the first thing is for example, if we call handle submit, which we'll use down below we can basically wrap our form and Every time that the unsubmit is called We inject all the values that have been managed by react hook form directly or have access to it, right?

[04:06] It injects it because we have access to it and then we can use those values in our unsubmit Then we're in this case. We're gonna use register. So what register does is pretty self-explanatory It'll grab like let's say if we have an input or a drop-down right and we want to register that component under react hook form

[04:26] So we'll say for example down here. We'll have input and we're gonna say, okay We want to register this input to be first name which is gonna match our schema which then is used in our use form hook and Basically everything within this form that is named first name will be managed

[04:45] Automatically by reactive form because we're registering the component, right? I think it's pretty self-explanatory then we move down into our actual form and One thing you'll see here is that I've imported this thing called form provider I've done this to show you another cool way, which we could basically have nested

[05:05] components that have access to our hook form and We can share all the logic that we've built in in the parent form in like child Components so and I've built this email input just to illustrate that really quickly But before I dive into that, let's just keep going down the line

[05:23] So we have like I said, right we'll have like our label that's not reactive form. But if you recall up here we I've also Destructured form state form state has is basically self-explanatory as well. We can get so many values like it's dirty It's loading. It's submitted right like touch fields default values in this case

[05:45] I've mostly used the errors and like this is a very good use case to take errors out So basically what we're saying is there are errors dot first name We're gonna show this very little message and this message is gonna correspond to what we have up here Which is super cool

[06:04] Similarly for last name, right? So very quickly before I show you a little demo here. We're gonna go into like email input and What you'll see here is I've called another hook called use form context And it's gonna have all the same values and like objects and functions that we had in use form

[06:23] However use form context will only work when there is a parent container that has form provider, which is super awesome which means that Because we can build custom components that we might not want to have in our form directly and we have them in let's say another File, but because they're under form provider or this component is under form provider

[06:42] It's gonna get all the properties from the parent, right? So in this case, we're gonna we're you know, I just added this form values But I've basically imported this from the what I inferred in the parent component, but very similarly, right? We have register we register this under email and then we're gonna have also access to the errors

[07:01] We're gonna have access to everything which is pretty dope So I'm gonna save this really quickly and I'm gonna show you what happens if we try to submit this form empty Boom this field is required. This field is required. So if we recall up here we have

[07:17] Basically, that's like the first kind of validation. Let's say I'm gonna in the email field I'm just gonna type a a a Now it says email must be a valid email if I hit submit We're also gonna get this out of the box saying please include an app and this

[07:34] Validation we have here come straight out of the box from like this email function from yelp, right? There's again also many other types of things. So now let's say we are gonna do at gmail.com Great. Now it's gonna say this field is required. So let's say I just type two two two

[07:52] Oh, no numbers allowed, right? And the reason we have no numbers allowed is because we said, okay this specific property first name Has to match this regular expression this regular expression allows no numbers So meaning if you violate that regular expression, we're basically gonna get this error message. So now if I type

[08:13] Alejandro it's gone, but we still have this one right here, right so I can now say Roman So let me get rid of this error message right here. Let me move my little face my beautiful face from there Now what I'm gonna do is I'm gonna show you so unsubmit here We had this unsubmit which is handle submit again handle submit

[08:33] We got from four methods and this is basically taking unsubmit and it's gonna inject Basically all the form values that we've created into our own submit. So it's gonna allow us to have access So if I press submit here, boom, our entire object is there this pretty pretty freaking sick in my opinion, right?

[08:51] So let me show you a couple more things which which I think are awesome So for example, let's say we have another thing called watch and what watch is gonna allow us to do is It's gonna allow us to track a specific values, right? So for example, we can say const first name

[09:08] Last name equals watch and there's like a lot of things maybe you want to track this to display a specific message so for example, if I say console dot log first name and now I start tracking here a Oops, there we go a lay So basically it's gonna work like you state, right?

[09:30] so there's so so many things you could do with this like sky's the limit and once you really start Understanding react hook form you basically won't need to use Q state You can manage everything here and you can like declare so many things in your schema. You can use arrays

[09:47] You can have files you can have whatever you want, right? So I'd suggest you give it a try It's gonna definitely help you and elevate your forms and take them to the next level If you have any questions, feel free to drop them in the comments. Thank you for watching y'all

https://app.egghead.io/api/v1/lessons/react-pass-authorizationparams-to-loginwithredirect-to-direct-users-to-auth0-sign-up/transcript

https://app.egghead.io/api/v1/lessons/react-end-auth0-user-session-with-the-logout-method-from-useauth0-hook/subtitles

Instructor: [0:00] Inside of the buttons folder, create a LogoutButton file. Then import the useAuth0 hook from the Auth0 React SDK, as well as React from React. Then create a component call LogoutButton. Then we'll grab the logout method from the useAuth0 hook.

[0:21] The logout method clears the React application session and redirects the user to the Auth0/V2/logout endpoint to clear the Auth0 session under the hood. Create a function called handleLogout, and then call logout passed in an object as an argument.

[0:40] Then we'll use logout params as the property. Logout params defines the parameters for the call to the /V2 /logout endpoint. The property will be returned to and the value of return to is window.location.origin, which will return the base URL.

[1:00] Then finally return some JSX, which will be a button with a class name of logout__button and onClick Handler with the handleLogout function. Then we'll set the copy to logout.

[1:17] To recap, creating the LogoutButton, we imported the useAuth0 hook from the Auth0 React SDK. We created a LogoutButton component. We also grabbed the logout method from the useAuth0 hook. Created a function called handleLogout, called logout, passed in an object as an argument.

[1:41] Used logout params as the property and used the return to property and set it to window.location.origin. Then we returned some JSX that was a button with an onClick handler that called the handleLogout function.

https://app.egghead.io/api/v1/lessons/react-end-auth0-user-session-with-the-logout-method-from-useauth0-hook/transcript

https://app.egghead.io/api/v1/lessons/auth0-use-the-value-of-isauthenticated-to-render-components-conditionality/transcript

https://app.egghead.io/api/v1/lessons/auth0-use-auth0-component-withauthenticationrequired-to-protect-react-router-6-routes/subtitles

Interviewer: [0:00] Inside the components folder, let's create an authentication guard file. First, I'm going to import the withAuthenticationRequired component from the Auth0 React SDK. Then import React from React.

[0:14] When you wrap your components and the withAuthenticationRequired higher-order component, any anonymous user who visits that component will be directed to the login page. Then return to that page after they've been authenticated.

[0:31] First, I'm going to create a component called authentication guard. Then I'm going to pass in component as a prop. Then I'm going to declare a new component, which will be the component that we want to be protected by withAuthenticationRequired.

[0:47] Then we'll return component. Now that we have the AuthenticationGuard component completed, we can use it to protect any React route. Let's head to app.JS, and let's import AuthenticationGuard.

[1:01] As you see here, we have the Auth0 sample application running alongside our code editor. If I click the menu and visit the profile route, I'm able to see the profile route. I'm also able to see public and I'm also able to see the protected route.

[1:19] We can use the AuthenticationGuard component to require a login to access these routes. Let's use the AuthenticationGuard component we created inside of the route component from React router.

[1:32] Inside of element, let's pass in the the AuthenticationGuard component with the component prop and set it to the profile page. Make sure that we hit save. Then now let's visit the profile page. As you see, I get redirected to the Auth0 universal login page.

[1:53] Now let's add the AuthenticationGuard component to the protected route as well as admin. Make sure that we hit save. Now we go to the application, we try to visit admin, we get redirected to the Auth0 login. If we try to go to protect it, we get redirected to the Auth0 login. If we try to visit profile, we get redirected to the Auth0 login.

[2:23] Just to recap, we created a AuthenticationGuard file in the components folder. In that file, we imported withAuthenticationRequired from the Auth0 SDK. Then we created an AuthenticationGuard component with a component prop.

[2:41] Then we created a new component which would be the component from the prop that gets parsed into the withAuthenticationRequired component. Then we return a new component.

[2:55] Then we headed over to AB.JS, we imported AuthenticationGuard. Then we parsed in the AuthenticationGuard component to the React router route component with a component prop and then passed in the route that we want to protect.

https://app.egghead.io/api/v1/lessons/auth0-use-auth0-component-withauthenticationrequired-to-protect-react-router-6-routes/transcript

https://app.egghead.io/api/v1/lessons/auth0-customize-ui-with-id-token-data-from-the-useauth0-hook-s-user-object/transcript

Secure React User Authentication with Auth0

Will Johnson

Free Community Resource

You might also like these resources:

Custom Authentication Flows for Modern Applications with Auth0 Actions

Auth0 Tips and Tricks

Add Github Login to Your Web App with OAuth 2.0

Free Community Resource

Course Content

You might also like these resources:

Custom Authentication Flows for Modern Applications with Auth0 Actions

Auth0 Tips and Tricks

Add Github Login to Your Web App with OAuth 2.0