Integrate Sessions With The Frontend (React)

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

// This value should point to your application's login URL.
// For example: https://your.app.com/auth/login.
const LOGIN_URL = '<replace with your application Login Endpoint URL>'

// This value should point to your application's logout URL.
// For example: https://your.app.com/auth/logout.
const LOGOUT_URL = '<replace with your application Logout Endpoint URL>'

// The type definition of the authenticated user. The user type can be modified to 
// fit your you needs.  This is just a minimal example for demonstration purposes.
type User = {
  email: string
};

// The type definition of the object that will be stored in the React Context.
type AuthContextProps = {
  // Boolean indicating if the user successfully authenticated or not.
  isAuthenticated?: boolean;
  // Boolean indicating if the application is loading and the user's authenticated 
  // state has not yet been determined.
  isLoading?: boolean;
  // Function to modify the user stored within the React Context.
  setUser: (user: User) => void;
  // Object containing data representing the authenticated user.
  user: User;
};

// Creates the React Context
const AuthContext = createContext<AuthContextProps>({
  isAuthenticated: false,
  isLoading: false,
  setUser: () => {},
  user: { email: '' },
});

// Provider that loads the React Context with the user's session data.
const AuthProvider = ({ children: React.ReactNode  }) => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [user, setUser] = useState<User>({ email: '' });

  // Bootstrap the application with the authenticated user's session data.
  useEffect(() => {
    const fetchSession = async () => {
      try {
        // Call your server's Session Endpoint to verify that the user
        // has a valid session cookie and update the user state with 
        // returned session data.
        const sessionData = await getSession();
        setIsAuthenticated(true);
        setUser(sessionData.user);
      } catch (error: unknown) {
        if (isUnauthorized(error)) { 
          window.location.href = redirectToLogin(); 
        } else {
          window.location.href = redirectToLogout();
        }
      } finally {
        setIsLoading(false);
      }
    };

    fetchSession();
  }, []);

  return (
    <AuthContext.Provider value={{ isAuthenticated, isLoading, user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
}

// Helper function for determining if an AxiosError was due to a 401.
function isUnauthorized(error: AxiosError) {
  if (!error) {
    return false;
  }
  if (error instanceof AxiosError) {
    return error.response?.status === 401;
  }
  return false;
}

function redirectToLogin() {
  window.location.href = LOGIN_URL;
}

function redirectToLogout() {
  window.location.href = LOGOUT_URL;
}

function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth() must be used within an AuthProvider');
  }
  return context;
}

export { AuthProvider, useAuth, redirectToLogin, redirectToLogout };

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import './index.css';

import { AuthProvider } from '@/context';

const root = createRoot(document.getElementById('root'));

root.render(
  <StrictMode>
    <AuthProvider>
      {children}
    </AuthProvider>
  </StrictMode>
);

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import './index.css';

import { App } from 'app';
import { AuthProvider } from 'context';

const root = createRoot(document.getElementById('root'));

root.render(
  <StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </StrictMode>
);

import React from "react";

import { useAuth, redirectToLogin, redirectToLogout } from "@/context/auth-context";

function App() {
  const { isAuthenticated, user } = useAuth();

  const AuthenticatedView = () => (
    <>
      <h1>Welcome to Wristband Auth, {user.firstName}!</h1>
      <button onClick={redirectToLogout}>Logout</button>
    </>
  );
  const UnauthenticatedView = () => (
    <>
      <h1>Welcome to Wristband Auth</h1>
      <button onClick={redirectToLogin}>Login</button>
    </>
  );

  return (
    <div>
      {isAuthenticated ? <AuthenticatedView /> : <UnauthenticatedView />}
    </div>
  );
};

export default App;

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import {  Dashboard, Spinner } from "@/components";
import { useAuth } from "@/context/auth-context";

const AuthGuard = ({ children, fallback = null }) => {
  const { isAuthenticated } = useAuth();
  // Show fallback UI (e.g., a redirect, login prompt, etc.)
  if (!isAuthenticated) {
    return fallback; 
  }
  return children;
};

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/dashboard"
          element={
            <AuthGuard fallback={<Login />}>
              <Dashboard />
            </AuthGuard>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;