protected routes for mutliple dashboard

Doyin Atobaru answered on January 16, 2025 Popularity 1/10 Helpfulness 1/10

answer protected routes for mutliple dashboard

protected routes for mutliple dashboard

Comment

'use client';

import { useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { usePathname, useRouter } from 'next/navigation';
import LoadingScreen from '../ui/loading-screen';

const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const router = useRouter();
  const pathname = usePathname();
  const { data: session, status } = useSession();

  // Only restrict routes that start with "/admin" or are "/chat"
  const isProtectedRoute = pathname.startsWith('/admin') || pathname.startsWith('/chat');
  const adminRoutes = ['/admin/login', '/admin/signup', '/admin/verify', '/admin/forgot-password'];
  const isAdminRoute = adminRoutes.includes(pathname);

  useEffect(() => {
    if (!isProtectedRoute || status === 'loading') return; // Don't do anything while loading

    if (session && isAdminRoute) {
      router.replace('/admin');
    } else if (!session && pathname.startsWith('/chat')) {
      router.replace('/login'); // Redirect to a general login page for /chat
    } else if (!session && !isAdminRoute) {
      router.replace('/admin/login');
    }
  }, [session, isAdminRoute, router, status]);

  if (status === 'loading') return <LoadingScreen />;

  // For non-protected routes, render the children without any restrictions
  if (!isProtectedRoute) return children;

  // Only render children if the session check is complete and the route is allowed
  if ((session && !isAdminRoute) || (!session && isAdminRoute)) {
    return children;
  }

  return null;
};

export default ProtectedRoute;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: dashboard javascript protected routes

Link to this answer
Share Copy Link

Contributed on Jan 16 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

protected routes for mutliple dashboard

Contents

More Related Answers

protected routes for mutliple dashboard

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.