Authentication Context with ReactJS

sonydaman

 

Introduction

In this blog post, we will learn how to create an Authentication Context using ReactJS. This context will allow us to share authentication state and logic across our application, making it easier to control access to certain routes and components.



Prerequisites

Before we start, make sure you have the following:

  • Basic understanding of ReactJS

  • Node.js and npm installed on your computer

  • A text editor, like Visual Studio Code

Setting Up the Project

First, let’s set up a new ReactJS project. Open your terminal and run the following command:

npx create-react-app auth-context



Then, navigate into your new project:

cd auth-context



Creating the Authentication Context

In React, a Context provides a way to pass data through the component tree without having to pass props down manually at every level. Let’s create an Authentication Context:

import React from 'react';


const AuthContext = React.createContext();


export default AuthContext;


This AuthContext will hold our authentication state and any authentication methods we want to expose to our components.

Using the Authentication Context

Now, let’s create a component that uses this AuthContext. We’ll create a AuthProvider component that wraps our application and provides authentication functionality:

import React, { useState } from 'react';

import AuthContext from './AuthContext';


const AuthProvider = ({ children }) => {

  const [isAuthenticated, setIsAuthenticated] = useState(false);


  const login = () => {

    setIsAuthenticated(true);

  };


  const logout = () => {

    setIsAuthenticated(false);

  };


  return (

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

      {children}

    </AuthContext.Provider>

  );

};


export default AuthProvider;



In this AuthProvider component, we’re using React’s useState hook to keep track of whether the user is authenticated. We’re also providing login and logout methods that update this state.

Accessing Authentication Context in Components

Finally, let’s see how we can use this AuthContext in a component. Here’s an example of a Dashboard component that displays different content based on the authentication state:

import React, { useContext } from 'react';

import AuthContext from './AuthContext';


const Dashboard = () => {

  const { isAuthenticated, logout } = useContext(AuthContext);


  if (!isAuthenticated) {

    return <p>Please log in to see the dashboard.</p>;

  }


  return (

    <div>

      <h1>Welcome to the Dashboard!</h1>

      <button onClick={logout}>Log Out</button>

    </div>

  );

};


export default Dashboard;


In this Dashboard component, we’re using the useContext hook to access our AuthContext. We can then use the isAuthenticated state and the logout method in our component.

Conclusion

And that’s it! You’ve successfully created an Authentication Context with ReactJS. This is a powerful pattern for sharing state and functionality across your application, and is especially useful for things like authentication. Happy coding!

0 Comments