Authentication Handling in React
By: Akash Thakur
Tags: React, Authentication, JavaScript, Programming, Software Development

Authentication Handling in React

With Hooks and Context

Photo by Micah Williams on Unsplash

User authentication is one of the main pillars of modern frontend applications

We are going to create a React app here and along the way we will add authentication pieces eventually finishing with auto login and auto logout.

Basic Authentication

Our react application is going to have an App component which will host two other components. One is going to have authentication logic and the other will be protected component which the user can only see once he’s authenticated.

App.js

import react from ‘react’ export default function App(){

return (

<div class="center">

<Authentication/>

<ProtectedResource />

</div>

)

}

And here’s the code for Authentication and ProtectedResource components.

authentication.js

import react from ‘react’ export default function Authentication(){

return (

<>

<button className="login">Login</button>

<button className="logout">Logout</button>

</>

)

}

protectedPage.js

import react from ‘react’ export default function ProtectedResource(){

return (

<h1>I am a authenticated resource</h1>

)

}

Currently both the components are visible as there is no logic in place.

Let’s start adding our authentication in bits and pieces. Since we will be needing authentication information in more than one components we can make use of a concept in react which is context.

Context allows us to pass data between any components in our application without using props.

Our context is going to look like this:

context.js

import { createContext } from “react”; export const AuthContext = createContext({

isLoggedIn: false,

token: null,

login: () => {},

logout: () => {}

});

We have defined a couple of properties here which we will be setting in our App.js file once the user logs in or logs out.

This is how we are going to use AuthContext in App.js by importing it like below:

App.js

import react from ‘react’

import {AuthContext} from ‘./context’; export default function App(){

return (

<AuthContext.Provider>

<Authentication/>

<ProtectedResource />

<AuthContext.Provider />

)

}

Wrapping our App component with AuthContext makes sure that anytime anything in the context changes, children component of App that use context change as well.

We can now manage some state here in the App component and bind this to the value prop of our context and hence when the state here changes, we will be able to re-render or update the components that are interested in our context.

App.js

import react, { useState } from ‘react’

import {AuthContext} from ‘./context’; export default function App(){

const [loggedIn, setLoggedIn] = useState(false); const login = () => {

setLoggedIn(true);

} const logout = () => {

setLoggedIn(false);

} return (

<AuthContext.Provider value={isLoggedIn: isLoggedIn, login: login, logout: logout}>

<div class="center">

<Authentication/>

<ProtectedResource />

</div>

<AuthContext.Provider />

)

}

Now let’s listen for the context changes in other components:

protectedPage.js

import react, { useContext } from ‘react’

import { AuthContext } from "./context"; export default function ProtectedResource(){

const authContext = useContext(AuthContext); return authContext.isLoggedIn && <h2>Protected resource</h2>;

}

authentication.js

import react, { useContext } from ‘react’

import { AuthContext } from "./context"; export default function Authentication(){

const authContext = useContext(AuthContext); const loginHandler = () => {

authContext.login();

}; const logoutHandler = () => {

authContext.logout();

}; return (

<>

{!authContext.isLoggedIn && <button className="login" onClick={loginHandler}>Login</button>}

{authContext.isLoggedIn && (<button className="login" onClick={logoutHandler}>Logout</button>

</>

)

}

Additional thing you will notice here is that I have added handlers in Authentication component which changes the value in our context.

Here’s a code overview in sandbox:

Basic Authentication

Following points summarises what we have achieved thus far: