Learn Auth0, Jekyll and Redux

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



auth0

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

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

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

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

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

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

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

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

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/
```





Link Auth0 Application to React Application

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

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux


With our migration complete, you notice that there is A TON of Redux code we can simply delete. We no longer have to manually handle all the server interactions that our application requires to function. Redux can handle the client-side state that it was meant to handle and RTK Query can take care of fetching and caching our network data.

Not only is our code base cleaner and easier to understand but it also provides a significant boost in the user experience of our application by making features like prefetching, optimistic updates, loading and error states easier to include.

If you're running a redux application in production I suggest taking a serious look at RTK Query. After this course you should have all the tools you need to make that happen.


Delete Unused Redux Code After Migrating to RTK Query

RTK Query is built on top of Redux which has the huge benefit of utlizing the [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en). Every RTK Query operation is represented with the actions and state modifications that happen in the DevTools. 

There's also RTK Query tab in Redux DevTools so that you can take a detailed look at the various queries and mutations you have going at any given time.

In this lesson you'll get a basic overview of the Redux DevTools and how it works with RTK Query.

Debug RTK Query Applications with the Redux DevTools Chrome Extension

The previous prefetching that we did with the `initiate` method is most useful for data that will existing on your initial page load. For other data throughout your application pre-loading can still come in handy, but you need to be thoughtful about what gets loaded, and when.

RTK Query gives you a `usePrefetch` hook that you can sprinkle throughout your application depending on what your user is doing. In this lesson, we prefetch dog data when the user hovers over the dog and services links, indicating their intent to load those page. With this approach to pre-fetching it's unlikely your users will ever see a loading spinner.

The documentation for RTK Query's `usePrefetch` hook can be found here:
https://redux-toolkit.js.org/rtk-query/usage/prefetching#prefetching-with-react-hooks


Prefetch Data in Response to User Interactivity with RTK Query's usePrefetch hook


RTK Query can start fetching data in your application before React is even available. This can be handy when your application relies heavily on data that you need to fetch. This data is cached so your users won't be refetching this data when they navigate through out the application.

Prefetching relies on the powerful `api.endpoints.<queryName>.initiate()` method that underlies much RTK Query's internals. For RTK Query to process and store initiate() calls properly they have to be sent into the redux store with `store.dispatch()`.

An advanced variation of this splits your main app file into the data pre-fetching (done first) and then your react application (lazy-loaded with `import()`). The idea being that you want to start your data calls before JS has to even start process what's likely to be a large bundle file.

For more information about prefetching with RTK Qyery see: https://redux-toolkit.js.org/rtk-query/usage/prefetching#prefetching-without-hooks.


Prefetch Data in RTK Query using an Endpoint's initiate() Method

In this lesson we look at the options for modifying headers on your queries. We start with adding a `headers` object to an individual query. That requires moving our query from returning a url string, to returning an object with the URL and the new `headers` property. We also add `headers` to our `baseQuery`, but replace that with the more flexible [prepareHeaders](https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#prepareheaders).

`prepareHeaders` relies on the [Headers object](https://developer.mozilla.org/en-US/docs/Web/API/Headers) that is part of the Fetch API. As a second argument you also can access the current redux state. Accessing the redux state is helpful if you want to access saved data such as an authentication token.

Here's an example of using `prepareHeaders` for setting an `authorization` header:
https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#setting-default-headers-on-requests


Customize Query and Mutation Headers in RTK Query with prepareHeaders


The thing about optimistic updates is that sometimes the worst case happens: your server fails. RTK Query makes handling this case incredibly easy.

In your `onQueryStarted` handler you have access to the original promise (similar to the results of `unwrap()`) in a value called `queryFulfilled`. With this value you can add a `.catch()` which will be ready to handle any non-200 response and in there you can call `.undo()` on the results of dispatching `api.util.updateQueryData`.

Doing that will revert your redux and rtk query state to where it was before your made the change. It's honestly kind of magical.

The document for optimistic updates and undo can be found here: https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates#optimistic-updates


Undo an Optimistic Update in RTK Query with queryFulfilled


Optimistic updates are great for user experience. In this lesson we purposefully setup the remove dogs handler to wait several seconds to return. That meant for an awkward experience for users while waiting for the dog deletion to go through. It's going to go through 99% of the time right? Why not just respond like it worked? That's what optimistic updates allow you to do.

In every query or mutation you define, you have the option of including an `onQueryStarted` listener, which will be executed just as the query is fired off. In there you receive the arguments passed into the query or mutation as the first, and then a number of utilities including `dispatch` passed as the second argument.

This will let you `dispatch(api.util.updateQueryData(<queryName>, <queryArgument>, <modificationFn>))` and modify the cached data stored for that particular query.

If you're using `invalidateTags` with your mutation as well as manually modifying the cache, your cache will be updated immediately and then refetched after the mutation was successful.

Two example of optimistic updates with RTK Query can be found here:

- https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates#optimistic-updates
- https://redux-toolkit.js.org/rtk-query/usage/examples#react-optimistic-updates


Perform Optimistic Updates in RTK Query by Dispatching the updateQueryData Action


This is a small lesson that covers a tiny feature of RTK Query that enables two additional refetch options: `refetchOnMount` and `refetchOnReconnect`.

In order to support them you need to include `setupListeners()` in your redux store. And then you'll have the ability to automatically refetch data when your page comes into focus or reconnects to the network. The main idea is if you're outside of the page on a different app and come back it will make sure your users are seeing the most up-to-date information.

More information about these options can be found here:

- https://redux-toolkit.js.org/rtk-query/overview#configure-the-store
- https://redux-toolkit.js.org/rtk-query/api/createApi#refetchonfocus
- https://redux-toolkit.js.org/rtk-query/api/createApi#refetchonreconnect


Refetch Data on Focus And Reconnect with RTK Query's setupListeners


The tags feature shown in this lesson is arguably RTK Query's best feature. It's conceptually simple, but incredibly powerful. If you can know ahead of time which operations will invalidate your data, then you should always refresh the data after you perform those operations.

The basic premise is that you specify which tags queries rely on with `providesTags` and then which tags a mutation will invalidate with `invalidatesTags`.

One of the advanced things you can do with tags, which we don't cover here is configuring mutations to invalidate tags with a specific ID. So imagine if you edit an entry, you don't want it to invalidate every other entry, just that one AND the list. This is covered in the [automated refreshing](https://redux-toolkit.js.org/rtk-query/usage/automated-refetching) section of the RTK Query Docs. There's also information in the docs about [how to handle pagination with tags](https://redux-toolkit.js.org/rtk-query/usage/pagination#automated-re-fetching-of-paginated-queries).


Invalidate RTK Query Cache Entries Automatically using providesTags and invalidateTags


This lesson demonstrates how to use the [keepUnusedDataFor](https://redux-toolkit.js.org/rtk-query/api/createApi#keepunuseddatafor) of APIs and queries to modify the default timeout of cached items when they're not being used. "Used" here refers to components subscribing to them via query hooks. If you're actively relying on the data on the page you're in, RTK Query won't just go and pull data fresh, but if you move away for long enough and then come back, it will make sure your data is up-to-date.

This is actually a brilliant feature, but the specific number for how long the timeout should be is going to depend on the usage patterns of your users and how frequently the data changes on the server. If your data changes infrequently there may not be any reason to have this enabled at all, you could set it to `3600s` (1 hr) for example.


Invalidate the RTK Query Cache using keepUnusedDataFor


This lesson is about a powerful combo, refetch and unwrap.

The first and simplest concept is [refetch](https://redux-toolkit.js.org/rtk-query/usage/queries#frequently-used-query-hook-return-values), which forces whatever query you're subscribed to, to pull the latest data from the server. Refetch takes no arguments and doesn't let you change the query in any way. It just forces it to be called again. Another way to manually call refetch is to use `initiate` on your query's endpoint. For example, `api.endpoints.getDogs.initiate(undefined, { forceRefetch: true })` would do the same thing as our `refetch` call here, but `refetch` is a lot cleaner.

The second part is around [unwrap](https://redux-toolkit.js.org/api/createAsyncThunk#unwrapping-result-actions), which lets you access the original promise result from a mutation, which you can then use to immediately trigger some action, such as refresh. Or, you can use it to display an error message when the mutation fails.

Manually Refetch Data After an RTK Query Mutation with unwrap() and refetch()


Here we use `builder.mutation()` to define a mutation in our API. What is a mutation? Well it's basically a POST request or anything that would modify something on the server. You'll notice `builder.mutation()` and `builder.query()` look very similar except here we are passing the URL in an options object and that's only because we want to pass `method` and `body` as well. The query here could potentially also be a string just like in `builder.query`.

You probably noticed that we removed the refetch that was happening with `dispatch(getDogs())`. That will be replaced in the next lesson with the `refetch` method.

More information about the options you can pass into `builder.mutation` can be found here:
https://redux-toolkit.js.org/rtk-query/usage/mutations


Migrate a Thunk in a Redux Application to an RTK Query Mutation

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.

Search 100s of Issues with GitHub CLI as Context for AI Studio

I often find myself wondering how to use certain APIs in certain situations, and I have a couple of keywords that I try and search up on Google. 

What you can do in this situation is turn to GitHub and see how other people have actually used this code on public projects. The GitHub CLI enables us to run searches like this, and we can take the results and work on them programmatically.

Inside of Cursor with their Composer AI agent, we can search for the files we want, tell the agent to download them, and inspect them for better understanding of how those things work together.

Search All of GitHub's Code and Pass the Results to AI Agents in Cursor

Implement virtual scrolling to handle large datasets in an HTML table. Start with a basic table that renders 10,000 rows of data. The browser can struggle with this amount of DOM nodes to render at one time, especially on low end devices. 

We implement tanstack react virtual to render only the necessary amount of rows the user is viewing. The implementation includes proper column sizing, accessibility considerations, and convenient scroll controls, resulting in a smooth and performant table experience regardless of the dataset size.

Create a row virtualized HTML table with Tanstack Virtual

Learn how to implement virtual scrolling in React tables using TanStack Table and Tanstack Virtual with the useWindowVirtualizer React hook.

The most difficult tasks will require the strongest AI models. And those models simply aren't available as AI agents inside of your tooling. So the best workflows are to drag and drop the files you need to be changed and analyzed inside of a reasoning model such as OpenAI's O1 Pro, then letting it create a giant plan for your dumber AI agents to work on. The key here is that instead of just copying and pasting the entire plan into Cursors Composer or your AI agent, it's to create a file inside of your project and ask your agent to tackle the plan one step at a time. This allows you ample opportunity between each step to test and verify the micro steps along the way. Otherwise, as I've experienced many times, a session can go way off track and you burn a lot of time and burn a lot of AI requests Cursors Composer and it starts churning through a plan Cursors Composer and making lots of unwanted changes. Cursors Composer and it's to guide an AI agent to hold its hand along the way, especially through the most complex tasks. Cursors Composer and the most complex tasks Cursors Composer and the most complex tasks require a step-by-step plan.

Planning AI Agent Sessions with Reasoning Models

AI agents will inevitably make mistakes—it's just a matter of when. A key tool in your toolbox, once they do make mistakes after working on a problem for a while, is to use **git diff** to capture all of the changes they've made. 

Once you have those changes in a text file, you have a portable document that you can test against other AI models. This allows you to move the problem into smarter reasoning models with smaller context windows, helping you isolate and focus on the issue at hand.

**git diff** has been invaluable when working with AI agents because they'll often make many good changes but also slip in one tiny error. Finding that one small mistake is **git diff**’s superpower.

Search

Search Results