Sign up for an Auth0 account if you don’t have one

SDK Setup Wizard

​
Get Started

1

Create a new project

Create a new React project for this Quickstart
npm create vite@latest auth0-react -- --template react-ts
Open the project
cd auth0-react
2

Install the Auth0 React SDK

npm add @auth0/auth0-react && npm install
3

Setup your Auth0 App

Next up, you need to:
  1. Create a new Single-Page Application on your Auth0 tenant.
  2. Generate a .env file in your project’s root directory with the Domain and Client ID of your newly created app.
You can manually set up your app on the dashboard or run the following script to do this automatically:
AUTH0_APP_NAME="My App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t spa -c http://localhost:5173 -l http://localhost:5173 -o http://localhost:5173 --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && echo "VITE_AUTH0_DOMAIN=${DOMAIN}" > .env && echo "VITE_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && rm auth0-app-details.json && echo ".env file created with your Auth0 details:" && cat .env
4

Add the provider

src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css'; // Importing the main CSS file
import App from './App.tsx';
import { Auth0Provider } from '@auth0/auth0-react';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Auth0Provider
      domain={import.meta.env.VITE_AUTH0_DOMAIN}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
      <App />
    </Auth0Provider>
  </StrictMode>
);
5

Create Login, Logout and Profile Components

Create files
touch src/LoginButton.tsx && touch src/LogoutButton.tsx && touch src/Profile.tsx
And add the following code snippets
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";

const LoginButton = (): JSX.Element => {
  const { loginWithRedirect } = useAuth0();
  return <button onClick={() => loginWithRedirect()} className="button login">Log In</button>;
};

export default LoginButton;
7

Run your app

npm run dev
CheckpointYou should now have a fully functional Auth0 login page running on your localhost