next-protected-auth

import { useNextAuthProtectedHandler, NextAuthProtectedLogin } from 'next-protected-auth'; import { useRouter } from 'next/router'; import type { AppProps } from 'next/app'; import { useEffect } from 'react'; // This setup is typically for Next.js Pages Router in pages/_app.tsx // For App Router, you'd integrate the handler within middleware or a root layout. export default function MyApp({ Component, pageProps }: AppProps) { const router = useRouter(); // Configure the authentication handler for route protection const { isConnected, setIsConnected } = useNextAuthProtectedHandler({ publicURLs: ['/', '/about', '/auth/login', '/auth/callback'], loginURL: '/auth/login', authCallbackURL: '/auth/callback', renewTokenFct: (oldAccessToken?: string) => { // Implement your token renewal logic here, e.g., an API call to refresh tokens console.log('Attempting to renew token:', oldAccessToken); // In a real app, this would be an async operation returning a new token or throwing an error. return 'new-mock-access-token'; // Return the new access token }, verifyTokenFct: (accessToken?: string) => { // Implement your token verification logic here, e.g., check JWT expiration locally or via an API console.log('Verifying token:', accessToken); // Return a string indicating validity ('valid', 'expired', etc.) or empty if invalid return accessToken && accessToken !== 'expired-token' ? 'valid' : ''; }, allowNotFound: true, // Allows unauthenticated users to see 404 pages }); useEffect(() => { // Example: React to connection status for UI updates or additional redirects if (isConnected) { console.log('User is authenticated!'); } else { console.log('User is not authenticated.'); } }, [isConnected]); // Render specific authentication components based on the current path if (router.pathname === '/auth/login') { return ( <NextAuthProtectedLogin callback={() => { console.log('Login initiated. Redirecting user to OAuth provider...'); // Example: window.location.href = process.env.NEXT_PUBLIC_OAUTH_LOGIN_URL ?? ''; }} authCallbackURL="/auth/callback" /> ); } // Render the main application component return <Component {...pageProps} />; }