The Set Up

We will start by signing up for the Auth0 service, and create a new client for our tutorial app. We’ll need the Client ID and Domain in order to configure auth0 in our app. You can get these from your Auth0 dashboard.

Image: Getting the Domain and Client ID from Auth0 Dashboard (my client is called reactivesearch-auth0)

We’ll also need to add a callback URL in the Allowed Callback URLs section since after authentication the client is redirected back to the callback URL with the token info which we’ll later parse for our use. You can add the following to the Allowed Callback URLs:

http://localhost:3000/callback // our app will run on 3000 port

http://yourhosteddomain:PORT // add if you are hosting it live

Image: Adding allowed callback URLs in Auth0 Dashboard

Building the React App

This is how our final app’s file structure will look.

├── public

│ ├── 404.html // used for handling routes on gh-pages

│ └── index.html // root index html

└── src

├── App.js // reactivesearch example app

├── auth.js // main authentication service for our app

├── Callback.js // displayed when auth0 redirects to callback URL

├── history.js // used by auth service and react-router

├── Home.js // the root component for final app

├── index.css // styles

├── index.js // renders the final app using ReactDOM

└── Routes.js // uses react-router to handle all the app routes

1. Initializing the React project

I’m using create-react-app to set up the project easily without manually adding configurations:

npm install -g create-react-app // if you don't already have it create-react-app reactivesearch-auth0-example

After the dependencies are installed you can cd into the reactivesearch-auth0-example directory and run:

npm start

which should start the project at http://localhost:3000/ .

Image: CRA welcome screen (you should be seeing something like this)

2. Adding ReactiveSearch: Our UI View

Now that we have the basic react app initialized, lets create our UI view. We will use ReactiveSearch for building a quick UI.

npm install @appbaseio/reactivesearch

After adding the reactivesearch dependency we have to include reactivesearch styles into the build system. A simple way to do is to import the reactivesearch styles in our root project file src/index.js . This will inform webpack to bundle the CSS for reactivesearch along with the project.

import '@appbaseio/reactivesearch/dist/css/style.min.css';

We will use materialize as the style framework and add the CDN link directly in the /public/index.html file.

We can import some basic components in /src/App.js as:

import {

ReactiveBase,

CategorySearch,

RatingsFilter,

ResultCard

} from '@appbaseio/reactivesearch';

3. Getting started with ReactiveSearch

To start with, we will create a simple application with a few components. Alternatively, you can also follow these links to create your own app with your data:

(i) Creating an app and importing data

(ii) Understanding the base component for reactivesearch

The sample app we’re building is taken from the reactivesearch quick start guide. Lets modify the src/App.js file in our project directory. The final app should look like this:

Setting up the reactivesearch example app

If you have followed along thus far, the project should now look like this:

Image: Our React App after adding ReactiveSearch

Now that our React app is up and running with a live data view, lets proceed with adding authentication. You can also get the final code from the project repository.

Adding Authentication

When built, our app’s authentication flow will look like this:

Your App → Auth0 login → Auth0 authenticates user → Auth0 redirects to callback URL → Your App with the token

Image: Authentication flow

You can also check out the following screen-cast to see it in action:

Authentication flow

We’ll be following the Auth0 quick start guide for adding authentication to our React app, with some modifications to suit our app’s purpose.

1. Adding Auth0 and React Router

You can install auth0-js dependency by running:

npm install auth0-js

We’ll also need react-router-dom to handle the routes:

npm install react-router-dom

2. Creating An Authentication Service

We’ll be creating a history service to easily manipulate browser history. We’ll use history package which will be used by the authentication service and react-router.

createHistory can also accept an object containing basename property. This can be helpful if you want to set a base URL for all the routes. We’ll use the same history with react-router to correctly handle routes on our app deployed at github pages. In development we don’t need any such base URL.

Creating browser history service

We’ll be adding an authentication service to use auth0-js. This will look like:

Creating authentication service

Here’s how the authentication service works in a nutshell:

auth0 is a new instance of the Auth0 client. The redirectUri is set to localhost in development and to the project domain otherwise (which is github pages for this project)

is a new instance of the Auth0 client. The is set to in and to the project domain otherwise (which is github pages for this project) login method calls the authorize method on the auth0 client which will open up the Auth0 login screen.

method calls the authorize method on the auth0 client which will open up the Auth0 login screen. handleAuthentication method calls the parseHash method on the auth0 client. We’ll call this after successful authentication to read the token information from the page URL Auth0 redirects to after authentication.

method calls the method on the auth0 client. We’ll call this after successful authentication to read the information from the page URL Auth0 redirects to after authentication. setSession stores the information about access_token , id_token and expires_at in local storage so we can use it later without going through the authentication process again.

stores the information about , and in local storage so we can use it later without going through the authentication process again. logout clears all the session information about the tokens and expiry time from the local storage. After logout the user will need to authenticate (login) again to get the tokens.

clears all the session information about the tokens and expiry time from the local storage. After logout the user will need to authenticate (login) again to get the tokens. isAuthenticated checks if the token is past expiry time (set at the time of login). If the token is expired, the user will have to authenticate again and get a fresh set of tokens.

3. Adding a Callback component

We’ll need a Callback component to handle redirects from auth0. This component will show a loading message till the session is set up. After this the user will be redirected to the UI view by the authentication service.

Creating Callback component to handle redirects from Auth0

4. Adding a Home component

App component (the one we created previously) only if the user is logged in using our authentication.

We will show an example view to a non-authenticated user with an option to login or signup.

Creating Home component to conditionally render App

The Home component calls the isAuthenticated method in authentication service /src/auth.js and displays the App component only if the user is authenticated.

5. Setting up app routes and handling authentication

We’ll be using react-router-dom from react-router to handle all our routes. The handleAuthentication method is called after Callback component is rendered and parses the URL hash from the page auth0 redirects to after authentication. After we extract the token information we will direct the user to the Home component.

Creating Routes

The Router component takes the same history object that we used earlier in /src/auth.js . We’ve set simple routes:

/ route is the main route which renders the Home component

route is the main route which renders the component /home route also renders the Home component. This is the same route the user is redirected to after authentication.

route also renders the component. This is the same route the user is redirected to after authentication. /callback route renders the Callback component and runs the handleAuthentication function to parse the token information from Auth0’s redirect URL.

All the components rendered by react-router are also passed the auth object as a prop and all the other props by Route as {…props} . We don’t need the additional props from react-router in this tutorial but they’re very helpful when you want to interact with the history.

We have to also update the root component in /src/index.js to render the Routes component instead of the App component.

Updating the root component in index.js

That’s it! Our app is now ready with an authentication flow. You can now have fun with tweaking the UI view and adding more complex authorization views.

Further Reading

Check out the followup post on adding authentication to your APIs:

Summary

We walked through building a client-side only authentication flow for a React app. In the process, we learnt about the idea of access tokens and how they form the centerpiece of any authentication flow, and built a flow where we support username / password and Google based logins.

If you liked this post, you will love our deep dive posts for building data-driven Reactive Apps: