simplify authentication in react with usecontext and local storage persistence

Introduction:

Authentication is a crucial part of many web applications. In React, managing user authentication can be simplified using the useContext hook in combination with local storage persistence. In this blog post, we will guide you through the process of creating a custom hook that utilizes useContext to handle authentication and stores user data securely in local storage. By the end, you'll have a powerful and efficient way to manage authentication in your React applications.

Setting Up the Context Provider

To get started, let's create a context to hold the user data and authentication-related functions. We'll call it AuthContext. Create a new file called AuthContext.js and add the following code:

import React, { createContext, useState, useEffect } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Check if user data exists in local storage
    const storedUser = localStorage.getItem('user');

    if (storedUser) {
      setUser(JSON.parse(storedUser));
    }

    setIsLoading(false);
  }, []);

  const login = (credentials) => {
    // Simulate API request to authenticate user
    setIsLoading(true);
    setTimeout(() => {
      // Save user data and set it in the context
      setUser(credentials);
      localStorage.setItem('user', JSON.stringify(credentials));
      setIsLoading(false);
    }, 1000);
  };

  const logout = () => {
    // Clear user data from local storage and context
    setUser(null);
    localStorage.removeItem('user');
  };

  const authContextValue = {
    user,
    isLoading,
    login,
    logout,
  };

  return (
    <AuthContext.Provider value={authContextValue}>
      {children}
    </AuthContext.Provider>
  );
};

In the code snippet above, we define the AuthContext and AuthProvider components. The AuthProvider component wraps its children with the AuthContext.Provider. It maintains the state for the authenticated user (user) and a loading state (isLoading). The useEffect hook is used to check if user data exists in local storage during the initial render. If it does, the user data is retrieved and set in the state.

The login function simulates an API request to authenticate the user. Upon successful authentication, the user data is saved to both the local storage and the context. The logout function clears the user data from both local storage and the context.

Creating the Custom Hook

Now, let's create a custom hook called useAuth to access the AuthContext and its values. Create a new file called useAuth.js and add the following code:

import { useContext } from 'react';
import { AuthContext } from './AuthContext';

export const useAuth = () => {
  return useContext(AuthContext);
};

The useAuth hook simply uses the useContext hook to access the AuthContext and its values.

Utilizing the Custom Hook in a Component

With the AuthContext and useAuth hook set up, we can now use them in our components to access the user data and authentication functions. Let's create a simple component that displays the user's profile information and a logout button.

import React from 'react';
import { useAuth } from './useAuth';

const ProfilePage = () => {
  const { user, isLoading, logout } = useAuth();

  if (isLoading) {
    return <div

>Loading...</div>;
  }

  if (!user) {
    return <div>Please log in</div>;
  }

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

export default ProfilePage;

In the above code, we import and use the useAuth hook to access the user, isLoading, and logout values from the AuthContext. If the isLoading flag is true, we display a loading message. If there is no user data, we prompt the user to log in. Otherwise, we show the user's name and a logout button.

Conclusion

Congratulations! You have learned how to simplify authentication in your React applications using useContext and local storage persistence. By creating a custom hook that accesses the AuthContext, you can easily retrieve user data and authentication functions from any component. The added local storage persistence ensures that the user remains authenticated even if the page is refreshed.

By leveraging the power of React's hooks and context API, you can streamline your authentication workflow and focus on building the core features of your application. Start implementing this technique in your projects and enjoy the benefits of efficient and secure user authentication.