Auth0 Passwordless Email Authentication — React App

Hi there 👋🏼

If you are looking to quickly setup a free passwordless authentication service in your React app in less than 10 minutes, then this the right place to start!

Pre-requistes

1. An Auth0 account — Create here
2. Nodejs installed on your system
3. A code editor. My favourite - VS Code
4. Knowledge of React framework and hooks in React

If you are ready with all of the above, then we have no reason to wait. Let’s get started!

Step 1: Setup an application in Auth0

Once you’re logged in to your Auth0 account, go to Applications > Create Application.

Choose Single Page Web Applications.

Enter a name for you app and click Create.

Create application

Inside your app, go to Settings tab and configure the following:

1. Callback URL — http://localhost:3000
2. Logout URL — http://localhost:3000
3. Allowed web origins — http://localhost:3000

Step 2: Setup Passwordless connection

Go to Connections > Passwordless. Here you have two options — SMS and Email. To use SMS, you will need a Twilio account and an access token. Therefore, we will setup an Email passwordless connection instead.

Enable Email and click on it.

Under the Settings tab, check the following

• From — contains a valid email ID that belongs to you
• Subject is not empty
• Customise the email template under Body as per your need. We will use the default one.
• Authentication Parameters consists of

{ "scope": "openid profile" }

• Customise OTP Expiry and length
• Disable Sign ups allow you to restrict login to the users you directly add to your Auth0 account. We will not disable it

Under Applications tab, ensure that the email connection is enabled for the app you created in Step 1.

You can try this email connection by sending yourself an email from the Try tab.

Click Save and close the Email dialog.

Our work in the Auth0 account is done! Let’s move out of it for now.

Step 3: Create a React app and configure Auth0 React SDK

Open a terminal in your desired folder and run the following commands.

This creates a new React project and opens it in VS Code.

npx create-react-app passwordless-example
cd passwordless-example
code .

Now let’s install the auth0 react library in the project we just opened. Press (Ctrl + ~) to open the terminal in VS code. Run the following command

npm install @auth0/auth0-react

Let us clean up the default React code and add login/logout skeleton code.

1. Delete all the files in src folder except index.js and index.css
2. Remove reportWebVitals import and function call.
3. Create a App.js file inside the src folder and update the index.css file. Code for both these files are given below

App.js and index.css files

Start the app by running the following command. You should see a welcome screen as shown below open at http://localhost:3000

npm start

Welcome screen

4. Create a .env file in the root of the project folder with the following key value pairs

REACT_APP_AUTH0_DOMAIN=<your auth0 domain>
REACT_APP_AUTH0_CLIENT_ID=<your auth0 application client id>
REACT_APP_REDIRECT_URI=<your auth0 application callback url>

All of the above values can be found under Settings tab when you open your application in Auth0.

5. Import AuthProvider from auth0 library and wrap it around the App component. Configure the provider by passing auth0 application data stored in the environment variables. Your index.js file should look like this.

Step 4: Add Login and Logout functionalities

Auth0 library contains a hook — useAuth0() which provides login, logout and authentication information. We will make use of this to add in our app.

Update your App.js to the following

Login, Logout and user information

Now you should be redirected to the login/signup form when you click on the Login button in the app.

Auth0 login/signup

And after successful login, you should see a view like this

Logged in view

On click of Logout, you will be taken back to the welcome screen.

There you have it, a working free passwordless authentication integrated into your React app!

Pro tips

• You can add a rule under Rules section in Auth0 to restrict the app access to certain users for eg. users who are connected to the office network only.
• You can also add pre and post login/registration hooks under Hooks section in Auth0 which allow you to write nodejs code. Eg. Write a hook to update the user details in the company DB when a new user registers on your app.

Go crazy 🥳