# Login as First Page

{% tabs %}
{% tab title="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 at: ***full-version\src\routes\index.tsx***

{% code title="src\routes\index.tsx" %}

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

// project import
import MainRoutes from './MainRoutes';
import LoginRoutes from './LoginRoutes';
import ComponentsRoutes from './ComponentsRoutes';

// import { SimpleLayoutType } from 'config';
// import SimpleLayout from 'layout/Simple';
// import Loadable from 'components/Loadable';

// render - landing page
// const PagesLanding = Loadable(lazy(() => import('pages/landing')));

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

const router = createBrowserRouter(
  [
    // {
    //   path: '/',
    //   element: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
    //   children: [
    //     {
    //       index: true,
    //       element: <PagesLanding />
    //     }
    //   ]
    // },
    LoginRoutes,
    ComponentsRoutes,
    MainRoutes
  ],
  { basename: import.meta.env.VITE_APP_BASE_NAME }
);

export default router;
```

{% endcode %}

&#x20; 2\. Add default Login route: ***full-version\src\routes\LoginRoutes.tsx***

<pre class="language-typescript" data-title="src\routes\LoginRoutes.tsx"><code class="lang-typescript">import { lazy } from 'react';

// project import
import AuthLayout from 'layout/Auth';
import Loadable from 'components/Loadable';
import { APP_AUTH, AuthProvider } from 'config';

// Jwt Auth
const JwtAuthLogin = Loadable(lazy(() => import('pages/auth/jwt/login')));
...

// Firebase Auth
const FirebaseAuthLogin = Loadable(lazy(() => import('pages/auth/firebase/login')));
...

// Auth0 Auth
const Auth0AuthLogin = Loadable(lazy(() => import('pages/auth/auth0/login')));
...

// Aws Auth
const AwsAuthLogin = Loadable(lazy(() => import('pages/auth/aws/login')));
...

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

const LoginRoutes = {
  path: '/',
  children: [
    {
      path: '/',
      element: &#x3C;AuthLayout />,
      children: [
<strong>        {
</strong>          path: APP_AUTH === AuthProvider.JWT ? '/' : 'jwt',
          children: [
            {
              path: '/',
              element: &#x3C;JwtAuthLogin />
            },
<strong>            {
</strong>              path: 'login',
              element: &#x3C;JwtAuthLogin />
            },
            ...
          ]
        },
        {
          path: APP_AUTH === AuthProvider.FIREBASE ? '/' : 'firebase',
          children: [
            {
              path: '/',
              element: &#x3C;FirebaseAuthLogin />
            },
            {
              path: 'login',
              element: &#x3C;FirebaseAuthLogin />
            },
            ...
          ]
        },
        {
          path: APP_AUTH === AuthProvider.AUTH0 ? '/' : 'auth0',
          children: [
            {
              path: '/',
              element: &#x3C;Auth0AuthLogin />
            },
            {
              path: 'login',
              element: &#x3C;Auth0AuthLogin />
            },
            ...
          ]
        },
        {
          path: APP_AUTH === AuthProvider.AWS ? '/' : 'aws',
          children: [
            {
              path: '/',
              element: &#x3C;AwsAuthLogin />
            },
            {
              path: 'login',
              element: &#x3C;AwsAuthLogin />
            },
            ...
          ]
        }
      ]
    }
  ]
};

export default LoginRoutes;
</code></pre>

{% endtab %}

{% tab title="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 at: ***full-version\src\routes\index.jsx***

{% code title="src\routes\index.jsx" %}

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

// project import
import MainRoutes from './MainRoutes';
import LoginRoutes from './LoginRoutes';
import ComponentsRoutes from './ComponentsRoutes';

// import { SimpleLayoutType } from 'config';
// import SimpleLayout from 'layout/Simple';
// import Loadable from 'components/Loadable';

// render - landing page
// const PagesLanding = Loadable(lazy(() => import('pages/landing')));

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

const router = createBrowserRouter(
  [
    // {
    //   path: '/',
    //   element: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
    //   children: [
    //     {
    //       index: true,
    //       element: <PagesLanding />
    //     }
    //   ]
    // },
    LoginRoutes,
    ComponentsRoutes,
    MainRoutes
  ],
  { basename: import.meta.env.VITE_APP_BASE_NAME }
);

export default router;
```

{% endcode %}

&#x20; 2\. Add default Login route: ***full-version\src\routes\LoginRoutes.jsx***

<pre class="language-javascript" data-title="src\routes\LoginRoutes.jsx"><code class="lang-javascript">import { lazy } from 'react';

// project import
import AuthLayout from 'layout/Auth';
import Loadable from 'components/Loadable';
import { APP_AUTH, AuthProvider } from 'config';

// Jwt Auth
const JwtAuthLogin = Loadable(lazy(() => import('pages/auth/jwt/login')));
...

// Firebase Auth
const FirebaseAuthLogin = Loadable(lazy(() => import('pages/auth/firebase/login')));
...

// Auth0 Auth
const Auth0AuthLogin = Loadable(lazy(() => import('pages/auth/auth0/login')));
...

// Aws Auth
const AwsAuthLogin = Loadable(lazy(() => import('pages/auth/aws/login')));
...

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

const LoginRoutes = {
  path: '/',
  children: [
    {
      path: '/',
      element: &#x3C;AuthLayout />,
      children: [
<strong>        {
</strong>          path: APP_AUTH === AuthProvider.JWT ? '/' : 'jwt',
          children: [
            {
              path: '/',
              element: &#x3C;JwtAuthLogin />
            },
<strong>            {
</strong>              path: 'login',
              element: &#x3C;JwtAuthLogin />
            },
            ...
          ]
        },
        {
          path: APP_AUTH === AuthProvider.FIREBASE ? '/' : 'firebase',
          children: [
            {
              path: '/',
              element: &#x3C;FirebaseAuthLogin />
            },
            {
              path: 'login',
              element: &#x3C;FirebaseAuthLogin />
            },
            ...
          ]
        },
        {
          path: APP_AUTH === AuthProvider.AUTH0 ? '/' : 'auth0',
          children: [
            {
              path: '/',
              element: &#x3C;Auth0AuthLogin />
            },
            {
              path: 'login',
              element: &#x3C;Auth0AuthLogin />
            },
            ...
          ]
        },
        {
          path: APP_AUTH === AuthProvider.AWS ? '/' : 'aws',
          children: [
            {
              path: '/',
              element: &#x3C;AwsAuthLogin />
            },
            {
              path: 'login',
              element: &#x3C;AwsAuthLogin />
            },
            ...
          ]
        }
      ]
    }
  ]
};

export default LoginRoutes;
</code></pre>

{% endtab %}

{% tab title="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: **src/app/page.tsx**

{% code title="src/app/page.tsx" %}

```typescript
// project imports
// import SimpleLayout from 'layout/SimpleLayout';
import GuestGuard from 'utils/route-guard/GuestGuard';
import Login from 'views/auth/login';
// import Landing from 'views/landing';

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

{% endcode %}
{% endtab %}

{% tab title="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: **src/app/page.jsx**

{% code title="src/app/page.jsx" %}

```javascript
// project imports
// import SimpleLayout from 'layout/SimpleLayout';
import GuestGuard from 'utils/route-guard/GuestGuard';
import Login from 'views/auth/login';
// import Landing from 'views/landing';

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

{% endcode %}
{% endtab %}
{% endtabs %}