How to write a React + Auth0 App

井民全, Jing, mqjing@gmail.com

In the document, I'll show you how to write a React Application with Auth0 to enable the user authentication function. When user clicked the login button, the app will show an Auth0 Universal Login page for users to login or signup using a username and password or a social provider.

GitHub: Source

Here is the result.

Enjoy!

By Jing.

Table of contents

1. Configure 2

1.1. Get the App key 2

1.2. Setup URL 3

1.2.1. Allowed Callback URLs 3

1.2.2. Allowed Web Origins 4

1.2.3. Allowed Logout URL 4

2. Coding 5

2.1. Install dependency 5

2.2. Step 1: Configure the Auth0Provider component 5

2.3. Step 2: Create Login/Logout buttons 6

2.3.1. Login Button 6

2.3.2. Logout Button 7

2.4. Step 3: Add the Login/Logout button 7

3. Build && Run 8

4. Misc 9

4.1. the Sign up flow 9

4.1.1. Check 11

5. References 12

1. Configure

1.1. Get the App key

Page: https://manage.auth0.com/dashboard

[Applications] -> [Applications] -> Your app

Fig. The App dashboard. (Edit)

Auth0 Dashboard: App Setup

Domain: Your-Domain

Client ID: Your-Client-ID

1.2. Setup URL

1.2.1. Allowed Callback URLs

The URLs is the your app URL after user has authenticated.

1.2.2. Allowed Web Origins

The URLs listed should be allowed for use with Cross-Origin.

1.2.3. Allowed Logout URL

2. Coding

2.1. Install dependency

bash

# react template

npx create-react-app my-app --template typescript

cd my-app

# auth0

yarn add @auth0/auth0-react

2.2. Step 1: Configure the Auth0Provider component

Integrate the Auth0 React SDK by wrapping your root component with the Auth0Provider from @auth/auth0-react. For further information about how Auth0 manages the user authentication state, check to React Context .

Fill the "YOUR-DOMAIN" and "YOUR-CLIENT-ID" in the following code. You can get the information from the Auth0 dashboard.

File: src/index.ts

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

import { Auth0Provider } from "@auth0/auth0-react";

ReactDOM.render(

<Auth0Provider

domain="YOUR-DOMAIN"

clientId="YOUR-CLIENT-ID"

redirectUri={window.location.origin}

<React.StrictMode>

<App />

</React.StrictMode>

</Auth0Provider>,

document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

2.3. Step 2: Create Login/Logout buttons

2.3.1. Login Button

Create a login button using the loginWithRedirect() from the useAuth0() hook. When a user clicked, it will redirect the user to the Auth0 Universal Login page for login. Check the detail here.

File: src/features/LoginButton/LoginButton.tsx

import React from "react";

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

const LoginButton = () => {

const { loginWithRedirect } = useAuth0();

return <button onClick={() => loginWithRedirect()}>Log In</button>;

};

export default LoginButton;

2.3.2. Logout Button

import React from "react";

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

const LogoutButton = () => {

const { logout } = useAuth0();

return (

<button onClick={() => logout({ returnTo: window.location.origin })}>

Log Out

</button>

);

};

export default LogoutButton;

2.4. Step 3: Add the Login/Logout button

import React from 'react';

import './App.css';

import LoginButton from './features/LoginButton/LoginButton';

import LogoutButton from './features/LogoutButton/LogoutButton';

function App() {

return (

</div>

);

}

export default App;

3. Build && Run

yarn start

Click [Log in]

Clean

yarn clean

4. Misc

4.1. the Sign up flow

Step 1: Input [Email address] & [Password]

4.1.1. Check

Auth0 dashboard
[User management] -> [Users]

Fig. New user test1@test.com on the dashboard. (Edit)

井民全觀點 (Jing's Perspective)

2021年7月28日星期三

[auth0, react] How to write a React + Auth0 App

1. Configure

1.1. Get the App key