generated from muhtadeetaron/nextjs-template
110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { createContext, useContext, useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface AuthContextType {
|
|
token: string | null;
|
|
setToken: (token: string | null) => void;
|
|
logout: () => void;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
|
|
|
// Cookie utility functions
|
|
const getCookie = (name: string): string | null => {
|
|
if (typeof document === "undefined") return null;
|
|
|
|
const value = `; ${document.cookie}`;
|
|
const parts = value.split(`; ${name}=`);
|
|
if (parts.length === 2) {
|
|
return parts.pop()?.split(";").shift() || null;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const setCookie = (
|
|
name: string,
|
|
value: string | null,
|
|
days: number = 7
|
|
): void => {
|
|
if (typeof document === "undefined") return;
|
|
|
|
if (value === null) {
|
|
// Delete cookie by setting expiration to past date
|
|
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Strict; Secure`;
|
|
} else {
|
|
const expires = new Date();
|
|
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
|
|
document.cookie = `${name}=${value}; expires=${expires.toUTCString()}; path=/; SameSite=Strict; Secure`;
|
|
}
|
|
};
|
|
|
|
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
|
|
children,
|
|
}) => {
|
|
const [token, setTokenState] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const router = useRouter();
|
|
|
|
// Custom setToken function that also updates cookies
|
|
const setToken = (newToken: string | null) => {
|
|
setTokenState(newToken);
|
|
setCookie("authToken", newToken);
|
|
};
|
|
|
|
// On app load, check if there's a token in cookies
|
|
useEffect(() => {
|
|
const initializeAuth = () => {
|
|
const storedToken = getCookie("authToken");
|
|
|
|
if (storedToken) {
|
|
setTokenState(storedToken);
|
|
// Only redirect if we're on login/register pages
|
|
if (
|
|
router.pathname === "/" ||
|
|
router.pathname === "/login" ||
|
|
router.pathname === "/register"
|
|
) {
|
|
router.replace("/home");
|
|
}
|
|
} else {
|
|
// Only redirect to login if we're on a protected page
|
|
const publicPages = ["/", "/login", "/register"];
|
|
if (!publicPages.includes(router.pathname)) {
|
|
router.replace("/");
|
|
}
|
|
}
|
|
|
|
setIsLoading(false);
|
|
};
|
|
|
|
// Small delay to ensure router is ready
|
|
const timer = setTimeout(initializeAuth, 100);
|
|
return () => clearTimeout(timer);
|
|
}, [router.pathname]);
|
|
|
|
// Function to log out
|
|
const logout = () => {
|
|
setTokenState(null);
|
|
setCookie("authToken", null); // Remove token from cookies
|
|
router.replace("/login"); // Redirect to login screen
|
|
};
|
|
|
|
return (
|
|
<AuthContext.Provider value={{ token, setToken, logout, isLoading }}>
|
|
{children}
|
|
</AuthContext.Provider>
|
|
);
|
|
};
|
|
|
|
// Hook to use the AuthContext
|
|
export const useAuth = () => {
|
|
const context = useContext(AuthContext);
|
|
if (!context) {
|
|
throw new Error("useAuth must be used within an AuthProvider");
|
|
}
|
|
return context;
|
|
};
|