Login as First Page

How to set login as First page instead landing

This section explains how to set the login page as the default starting page, skipping the landing page for cases where it is not needed.

VITE (TS)

This section explains how to set the Login page as the default starting page, skipping the landing page, for cases where it is not needed.

1. Update Route start: full-version\src\routes\index.tsx

src\routes\index.tsx

// import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';

// routes
import AuthenticationRoutes from './AuthenticationRoutes';
import LoginRoutes from './LoginRoutes';
import MainRoutes from './MainRoutes';
import SimpleRoutes from './SimpleRoutes';

// project imports
// import Loadable from 'ui-component/Loadable';

// const PagesLanding = Loadable(lazy(() => import('views/pages/landing')));

// ==============================|| ROUTING RENDER ||============================== //

const router = createBrowserRouter(
  [
    // { path: '/', element: <PagesLanding /> },
    LoginRoutes,
    AuthenticationRoutes,
    SimpleRoutes,
    MainRoutes
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

1. Add default Login route: full-version\src\routes\LoginRoutes.tsx

src\routes\LoginRoutes.tsx

import { lazy } from 'react';

// project imports
import GuestGuard from 'utils/route-guard/GuestGuard';
import MinimalLayout from 'layout/MinimalLayout';
import NavMotion from 'layout/NavMotion';
import Loadable from 'ui-component/Loadable';

// login routing
const AuthLogin = Loadable(lazy(() => import('views/pages/authentication/authentication3/Login3')));
const AuthRegister = Loadable(lazy(() => import('views/pages/authentication/authentication3/Register3')));
const AuthForgotPassword = Loadable(lazy(() => import('views/pages/authentication/authentication3/ForgotPassword3')));

// ==============================|| AUTH ROUTING ||============================== //

const LoginRoutes = {
    path: '/',
    element: (
        <NavMotion>
            <GuestGuard>
                <MinimalLayout />
            </GuestGuard>
        </NavMotion>
    ),
    children: [
        {
            path: '/',
            element: <AuthLogin />
        },
        {
            path: '/login',
            element: <AuthLogin />
        },
        {
            path: '/register',
            element: <AuthRegister />
        },
        {
            path: '/forgot',
            element: <AuthForgotPassword />
        }
    ]
};

export default LoginRoutes;

VITE (JS)

This section explains how to set the Login page as the default starting page, skipping the landing page, for cases where it is not needed.

1. Update Route start: full-version\src\routes\index.tsx

src\routes\index.jsx

// import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';

// routes
import AuthenticationRoutes from './AuthenticationRoutes';
import LoginRoutes from './LoginRoutes';
import MainRoutes from './MainRoutes';
import SimpleRoutes from './SimpleRoutes';

// project imports
// import Loadable from 'ui-component/Loadable';

// const PagesLanding = Loadable(lazy(() => import('views/pages/landing')));

// ==============================|| ROUTING RENDER ||============================== //

const router = createBrowserRouter(
  [
    // { path: '/', element: <PagesLanding /> },
    LoginRoutes,
    AuthenticationRoutes,
    SimpleRoutes,
    MainRoutes
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

1. Add default Login route: full-version\src\routes\LoginRoutes.tsx

src\routes\LoginRoutes.jsx

import { lazy } from 'react';

// project imports
import GuestGuard from 'utils/route-guard/GuestGuard';
import MinimalLayout from 'layout/MinimalLayout';
import NavMotion from 'layout/NavMotion';
import Loadable from 'ui-component/Loadable';

// login routing
const AuthLogin = Loadable(lazy(() => import('views/pages/authentication/authentication3/Login3')));
const AuthRegister = Loadable(lazy(() => import('views/pages/authentication/authentication3/Register3')));
const AuthForgotPassword = Loadable(lazy(() => import('views/pages/authentication/authentication3/ForgotPassword3')));

// ==============================|| AUTH ROUTING ||============================== //

const LoginRoutes = {
    path: '/',
    element: (
        <NavMotion>
            <GuestGuard>
                <MinimalLayout />
            </GuestGuard>
        </NavMotion>
    ),
    children: [
        {
            path: '/',
            element: <AuthLogin />
        },
        {
            path: '/login',
            element: <AuthLogin />
        },
        {
            path: '/register',
            element: <AuthRegister />
        },
        {
            path: '/forgot',
            element: <AuthForgotPassword />
        }
    ]
};

export default LoginRoutes;

NEXT (TS)

This section explains how to set the Login page as the default starting page, skipping the landing page, for cases where it is not needed.

1. Update Route start: full-version/src/app/page.tsx

src/app/page.tsx

// project import
import MinimalLayout from 'layout/MinimalLayout';
import GuestGuard from 'utils/route-guard/GuestGuard';
// import Landing from 'views/pages/landing';
import Login from 'views/pages/authentication/Login';

// ==============================|| HOME PAGE ||============================== //

export default function HomePage() {
  return (
    <MinimalLayout>
      <GuestGuard>
        <Login />
      </GuestGuard>
    </MinimalLayout>
  );
}

NEXT (JS)

This section explains how to set the Login page as the default starting page, skipping the landing page, for cases where it is not needed.

1. Update Route start: full-version/src/app/page.jsx

src/app/page.jsx

// project import
import MinimalLayout from 'layout/MinimalLayout';
import GuestGuard from 'utils/route-guard/GuestGuard';
// import Landing from 'views/pages/landing';
import Login from 'views/pages/authentication/Login';

// ==============================|| HOME PAGE ||============================== //

export default function HomePage() {
  return (
    <MinimalLayout>
      <GuestGuard>
        <Login />
      </GuestGuard>
    </MinimalLayout>
  );
}

Remix

Remix has a based routing structure. When the path is then/login navigated to the login page on behalf of AuthGuard.

1. full-version\app\layout\index.tsx

// project import
import LAYOUT from 'constant';
import AuthGuard from 'utils/route-guard/AuthGuard';
import GuestGuard from 'utils/route-guard/GuestGuard';
import MainLayout from './MainLayout';
import MinimalLayout from './MinimalLayout';

// types
import type { Props } from 'constant';

// ==============================|| LAYOUTS - STRUCTURE ||============================== //

export default function Layout({ variant = LAYOUT.main, children }: Props) {
    switch (variant) {
        case LAYOUT.minimal:
            return <MinimalLayout>{children}</MinimalLayout>;

        case LAYOUT.noauth:
            return (
                <GuestGuard>
                    <MinimalLayout>{children}</MinimalLayout>
                </GuestGuard>
            );

        default:
            return (
                <AuthGuard>
                    <MainLayout>{children}</MainLayout>
                </AuthGuard>
            );
    }
}

1. We can set <layout> in full-version\app\routes\login\index.tsx

login/index.tsx

...

// project imports
import Layout from 'layout';
import LAYOUT from 'constant';
import AuthWrapper1 from 'components/authentication/AuthWrapper1';

...

// ================================|| AUTH3 - LOGIN ||================================ //

const Login = () => {
    ...
    return (
        <Layout variant={LAYOUT.noauth}>
            <AuthWrapper1>
                ...
            </AuthWrapper1>
        </Layout>
    );
};

export default Login;