Authentication in React Apps

1. Why Authentication is Important

Authentication helps in:

• Securing user data.
• Providing role-based access control (RBAC).
• Enhancing user experience with personalized content.

2. Setting Up Authentication in a React App

2.1 Using React Context for Authentication

React Context API can be used for managing authentication state globally.

Steps to Implement:

1. Create an AuthContext.js file:

import { createContext, useState, useEffect } from “react”;

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {

 const [user, setUser] = useState(null);

 useEffect(() => {

  const storedUser = localStorage.getItem(“user”);

  if (storedUser) {

   setUser(JSON.parse(storedUser));

  }

 }, []);

 const login = (userData) => {

  setUser(userData);

  localStorage.setItem(“user”, JSON.stringify(userData));

 };

 const logout = () => {

  setUser(null);

  localStorage.removeItem(“user”);

 };

 return (

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

   {children}

  </AuthContext.Provider>

 );

};

1. Wrap your app with AuthProvider in index.js or App.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { AuthProvider } from "./AuthContext";

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById("root")
);

2.Wrap your app with AuthProvider in index.js or App.js:

import React from “react”;

import ReactDOM from “react-dom”;

import App from “./App”;

import { AuthProvider } from “./AuthContext”;

ReactDOM.render(

 <AuthProvider>

  <App />

 </AuthProvider>,

 document.getElementById(“root”)

);

3:Use authentication context in your components:

import { useContext } from “react”;

import { AuthContext } from “../AuthContext”;

const Profile = () => {

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

 return (

  <div>

   {user ? (

    <>

     <h2>Welcome, {user.name}</h2>

     <button onClick={logout}>Logout</button>

    </>

   ) : (

    <h2>Please log in</h2>

   )}

  </div>

 );

};

export default Profile;