├── .vscode
    └── settings.json
├── postcss.config.js
├── public
    └── fonts
    │   ├── inter-bold-webfont.woff
    │   ├── inter-bold-webfont.woff2
    │   ├── inter-medium-webfont.woff
    │   ├── inter-medium-webfont.woff2
    │   ├── inter-regular-webfont.woff
    │   └── inter-regular-webfont.woff2
├── .prettierrc.js
├── jsconfig.json
├── components
    ├── FullPageLoader.jsx
    ├── CustomLink.jsx
    ├── UnstyledLink.jsx
    ├── PrivateRoute.jsx
    └── Nav.jsx
├── .gitignore
├── package.json
├── .prettierignore
├── pages
    ├── unprotected.jsx
    ├── _document.js
    ├── blocked-component.jsx
    ├── _app.js
    ├── blocked-unhandled.jsx
    ├── blocked.jsx
    └── index.jsx
├── tailwind.config.js
├── next-seo.config.js
├── README.md
├── styles
    └── globals.css
└── contexts
    └── auth.js


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "css.validate": false,
3 |     "editor.formatOnSave": true
4 | }


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |         tailwindcss: {},
4 |         autoprefixer: {},
5 |     },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/fonts/inter-bold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theodorusclarence/learn-auth-redirect-nextjs/HEAD/public/fonts/inter-bold-webfont.woff


--------------------------------------------------------------------------------
/public/fonts/inter-bold-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theodorusclarence/learn-auth-redirect-nextjs/HEAD/public/fonts/inter-bold-webfont.woff2


--------------------------------------------------------------------------------
/public/fonts/inter-medium-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theodorusclarence/learn-auth-redirect-nextjs/HEAD/public/fonts/inter-medium-webfont.woff


--------------------------------------------------------------------------------
/public/fonts/inter-medium-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theodorusclarence/learn-auth-redirect-nextjs/HEAD/public/fonts/inter-medium-webfont.woff2


--------------------------------------------------------------------------------
/public/fonts/inter-regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theodorusclarence/learn-auth-redirect-nextjs/HEAD/public/fonts/inter-regular-webfont.woff


--------------------------------------------------------------------------------
/public/fonts/inter-regular-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theodorusclarence/learn-auth-redirect-nextjs/HEAD/public/fonts/inter-regular-webfont.woff2


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     arrowParens: 'always',
 3 |     singleQuote: true,
 4 |     jsxSingleQuote: true,
 5 |     tabWidth: 4,
 6 |     overrides: [
 7 |         {
 8 |             files: '*.mdx',
 9 |             options: {
10 |                 tabWidth: 2,
11 |             },
12 |         },
13 |     ],
14 | };
15 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "moduleResolution": "node",
 3 |     "compilerOptions": {
 4 |         "jsx": "preserve",
 5 |         "baseUrl": ".",
 6 |         "paths": {
 7 |             "@/*": ["*"],
 8 |             "@/components/*": ["components/*"],
 9 |             "@/styles/*": ["styles/*"],
10 |         },
11 |     },
12 |     "exclude": ["node_modules", ".next"]
13 | }
14 |   


--------------------------------------------------------------------------------
/components/FullPageLoader.jsx:
--------------------------------------------------------------------------------
 1 | import { ImSpinner5 } from 'react-icons/im';
 2 | 
 3 | export default function FullPageLoader() {
 4 |     return (
 5 |         <div className='flex flex-col items-center justify-center min-h-screen text-gray-800'>
 6 |             <ImSpinner5 className='mb-4 text-6xl animate-spin' />
 7 |             <p>Loading...</p>
 8 |         </div>
 9 |     );
10 | }
11 | 


--------------------------------------------------------------------------------
/components/CustomLink.jsx:
--------------------------------------------------------------------------------
 1 | import UnstyledLink from './UnstyledLink';
 2 | 
 3 | export default function CustomLink(props) {
 4 |     return (
 5 |         <UnstyledLink
 6 |             {...props}
 7 |             className={`${props.className} inline-flex items-center font-bold hover:text-primary-400`}
 8 |         >
 9 |             {props.children}
10 |         </UnstyledLink>
11 |     );
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-tailwind-starter",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@tailwindcss/jit": "^0.1.1",
12 |     "autoprefixer": "^10.2.1",
13 |     "next": "10.0.5",
14 |     "next-seo": "^4.17.0",
15 |     "postcss": "^8.2.4",
16 |     "react": "17.0.1",
17 |     "react-dom": "17.0.1",
18 |     "react-icons": "^4.2.0",
19 |     "tailwindcss": "^2.1.2"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | .next
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 


--------------------------------------------------------------------------------
/pages/unprotected.jsx:
--------------------------------------------------------------------------------
 1 | import CustomLink from '@/components/CustomLink';
 2 | import { useAuth } from '@/contexts/auth';
 3 | 
 4 | export default function unprotected() {
 5 |     const { isAuthenticated } = useAuth();
 6 | 
 7 |     return (
 8 |         <div className='py-12 space-y-4 layout'>
 9 |             <h1 className='text-green-400'>
10 |                 This page is unprotected, anyone can see this
11 |             </h1>
12 |             <pre>{JSON.stringify({ isAuthenticated }, null, 2)}</pre>
13 |             <CustomLink href='/'>Back To Home</CustomLink>
14 |         </div>
15 |     );
16 | }
17 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document';
 2 | 
 3 | class MyDocument extends Document {
 4 |     static async getInitialProps(ctx) {
 5 |         const initialProps = await Document.getInitialProps(ctx);
 6 |         return { ...initialProps };
 7 |     }
 8 | 
 9 |     render() {
10 |         return (
11 |             <Html>
12 |                 <Head />
13 |                 <body>
14 |                     <Main />
15 |                     <NextScript />
16 |                 </body>
17 |             </Html>
18 |         );
19 |     }
20 | }
21 | 
22 | export default MyDocument;
23 | 


--------------------------------------------------------------------------------
/pages/blocked-component.jsx:
--------------------------------------------------------------------------------
 1 | import { useAuth } from '@/contexts/auth';
 2 | 
 3 | export default function blockedComponent() {
 4 |     const { user, logout, isAuthenticated } = useAuth();
 5 | 
 6 |     return (
 7 |         <div className='py-12 space-y-4 layout'>
 8 |             <h1>If you can see this, it means you are logged in</h1>
 9 |             <p>This page did the auth checking on PrivateRoute component.</p>
10 |             <pre>{JSON.stringify({ isAuthenticated }, null, 2)}</pre>
11 |             <pre>{JSON.stringify(user, null, 2)}</pre>
12 |             <button onClick={() => logout()}>logout & remove token</button>
13 |         </div>
14 |     );
15 | }
16 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const { fontFamily } = require('tailwindcss/defaultTheme');
 2 | 
 3 | module.exports = {
 4 |     mode: 'jit',
 5 |     purge: [
 6 |         './pages/**/*.{js,jsx,ts,tsx}',
 7 |         './components/**/*.{js,jsx,ts,tsx}',
 8 |     ],
 9 |     darkMode: false, // or 'media' or 'class'
10 |     theme: {
11 |         extend: {
12 |             fontFamily: {
13 |                 primary: ['Inter', ...fontFamily.sans],
14 |             },
15 |             colors: {
16 |                 primary: {
17 |                     400: '#00E0F3',
18 |                     500: '#00c4fd',
19 |                 },
20 |             },
21 |         },
22 |     },
23 |     variants: {
24 |         extend: {},
25 |     },
26 |     plugins: [],
27 | };
28 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import { DefaultSeo } from 'next-seo';
 2 | import SEO from '@/next-seo.config';
 3 | import '@/styles/globals.css';
 4 | import { AuthProvider } from '@/contexts/auth';
 5 | import PrivateRoute from '@/components/PrivateRoute';
 6 | 
 7 | function MyApp({ Component, pageProps }) {
 8 |     // Add your protected routes here
 9 |     const protectedRoutes = ['/blocked-component'];
10 | 
11 |     return (
12 |         <>
13 |             <AuthProvider>
14 |                 <PrivateRoute protectedRoutes={protectedRoutes}>
15 |                     <DefaultSeo {...SEO} />
16 |                     <Component {...pageProps} />
17 |                 </PrivateRoute>
18 |             </AuthProvider>
19 |         </>
20 |     );
21 | }
22 | 
23 | export default MyApp;
24 | 


--------------------------------------------------------------------------------
/components/UnstyledLink.jsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | 
 3 | export default function UnstyledLink(props) {
 4 |     const href = props.href;
 5 |     const isInternalLink =
 6 |         href && (href.startsWith('/') || href.startsWith('#'));
 7 | 
 8 |     if (isInternalLink) {
 9 |         return (
10 |             <Link href={href}>
11 |                 <a {...props} className={`${props?.className}`}>
12 |                     {props.children}
13 |                 </a>
14 |             </Link>
15 |         );
16 |     }
17 | 
18 |     return (
19 |         <a
20 |             className={`${props?.className}`}
21 |             target='_blank'
22 |             rel='noopener noreferrer'
23 |             {...props}
24 |         >
25 |             {props.children}
26 |         </a>
27 |     );
28 | }
29 | 


--------------------------------------------------------------------------------
/components/PrivateRoute.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | import { useRouter } from 'next/router';
 3 | 
 4 | import { useAuth } from '@/contexts/auth';
 5 | import FullPageLoader from './FullPageLoader';
 6 | 
 7 | export default function PrivateRoute({ protectedRoutes, children }) {
 8 |     const router = useRouter();
 9 |     const { isAuthenticated, isLoading } = useAuth();
10 | 
11 |     const pathIsProtected = protectedRoutes.indexOf(router.pathname) !== -1;
12 | 
13 |     useEffect(() => {
14 |         if (!isLoading && !isAuthenticated && pathIsProtected) {
15 |             // Redirect route, you can point this to /login
16 |             router.push('/');
17 |         }
18 |     }, [isLoading, isAuthenticated, pathIsProtected]);
19 | 
20 |     if ((isLoading || !isAuthenticated) && pathIsProtected) {
21 |         return <FullPageLoader />;
22 |     }
23 | 
24 |     return children;
25 | }
26 | 


--------------------------------------------------------------------------------
/pages/blocked-unhandled.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | import { useRouter } from 'next/router';
 3 | 
 4 | import { useAuth } from '@/contexts/auth';
 5 | 
 6 | export default function blocked() {
 7 |     const router = useRouter();
 8 | 
 9 |     const { isAuthenticated, user, logout, isLoading } = useAuth();
10 | 
11 |     useEffect(() => {
12 |         if (!isLoading && !isAuthenticated) {
13 |             router.push('/');
14 |         }
15 |     }, [isLoading, isAuthenticated]);
16 | 
17 |     return (
18 |         <div className='py-12 space-y-4 layout'>
19 |             <h1 className='text-red-400'>
20 |                 If you can see this, it means you are logged in
21 |             </h1>
22 |             <p>This page did the auth checking directly on the page file.</p>
23 |             <pre>{JSON.stringify({ isAuthenticated }, null, 2)}</pre>
24 |             <pre>{JSON.stringify(user, null, 2)}</pre>
25 |             <button onClick={() => logout()}>logout & remove token</button>
26 |         </div>
27 |     );
28 | }
29 | 


--------------------------------------------------------------------------------
/components/Nav.jsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | 
 3 | const links = [
 4 |     { href: '/', label: 'Route' },
 5 |     { href: '/', label: 'Route' },
 6 | ];
 7 | 
 8 | export default function Nav() {
 9 |     return (
10 |         <nav className='bg-gray-700'>
11 |             <ul className='flex items-center justify-between px-8 py-4'>
12 |                 <li>
13 |                     <Link href='/'>
14 |                         <a className='font-bold text-green-400'>Home</a>
15 |                     </Link>
16 |                 </li>
17 |                 <ul className='flex items-center justify-between space-x-4'>
18 |                     {links.map(({ href, label }) => (
19 |                         <li key={`${href}${label}`}>
20 |                             <Link href={href}>
21 |                                 <a className='text-white hover:text-green-400'>{label}</a>
22 |                             </Link>
23 |                         </li>
24 |                     ))}
25 |                 </ul>
26 |             </ul>
27 |         </nav>
28 |     );
29 | }
30 | 


--------------------------------------------------------------------------------
/pages/blocked.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | import { useRouter } from 'next/router';
 3 | import { useAuth } from '@/contexts/auth';
 4 | import FullPageLoader from '@/components/FullPageLoader';
 5 | 
 6 | export default function blocked() {
 7 |     const router = useRouter();
 8 | 
 9 |     const { isAuthenticated, user, logout, isLoading } = useAuth();
10 | 
11 |     useEffect(() => {
12 |         if (!isLoading && !isAuthenticated) {
13 |             router.push('/');
14 |         }
15 |     }, [isAuthenticated, isLoading]);
16 | 
17 |     if (isLoading || !isAuthenticated) {
18 |         return <FullPageLoader />;
19 |     }
20 | 
21 |     return (
22 |         <div className='py-12 space-y-4 layout'>
23 |             <h1>If you can see this, it means you are logged in</h1>
24 |             <p>This page did the auth checking directly on the page file.</p>
25 |             <pre>{JSON.stringify({ isAuthenticated }, null, 2)}</pre>
26 |             <pre>{JSON.stringify(user, null, 2)}</pre>
27 |             <button onClick={() => logout()}>logout & remove token</button>
28 |         </div>
29 |     );
30 | }
31 | 


--------------------------------------------------------------------------------
/next-seo.config.js:
--------------------------------------------------------------------------------
 1 | const title = 'Learn Next.js Auth Redirect';
 2 | const description =
 3 |     'Attempt to learn how to redirect Next.js protected page without flashing content';
 4 | 
 5 | const SEO = {
 6 |     title,
 7 |     description,
 8 |     // canonical: 'https://theodorusclarence.com',
 9 |     openGraph: {
10 |         type: 'website',
11 |         locale: 'en_IE',
12 |         url: 'https://theodorusclarence.com',
13 |         title,
14 |         description,
15 |         images: [
16 |             {
17 |                 url:
18 |                     'https://theodorusclarence.com/favicon/ms-icon-144x144.png',
19 |                 alt: title,
20 |                 width: 144,
21 |                 height: 144,
22 |             },
23 |         ],
24 |     },
25 | };
26 | 
27 | export default SEO;
28 | 
29 | // EXAMPLES
30 | {
31 |     /* 
32 |     const title = 'Next.js Tailwind Starter';
33 |     const description = 'your description';
34 |     const url = 'https://theodorusclarence.com';
35 | 
36 |     <NextSeo
37 |     title={title}
38 |     description={description}
39 |     canonical={url}
40 |     openGraph={{
41 |         url,
42 |         title,
43 |         description,
44 |     }}
45 | />;  */
46 | }
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Learn Auth Redirect Nextjs
 2 | This is a NextJs and Tailwind project bootstrapped using nextjs-tailwind-starter created by [Theodorus Clarence](https://github.com/theodorusclarence/nextjs-tailwind-starter).
 3 | 
 4 | ## Log
 5 | - [x] redirect when is not logged in (works if you directly open /blocked)
 6 | - [x] don't show content when waiting to check if logged in (fixed with full page loader)
 7 | - [ ] when going to page /blocked using button, still flashes full page loader for a split second
 8 | 
 9 | 
10 | 
11 | ## Getting Started
12 | 
13 | To use this starter, you can use create-next-app to do it by:
14 | ```bash
15 | npx create-next-app -e https://github.com/theodorusclarence/nextjs-tailwind-starter project-name
16 | ```
17 | 
18 | or
19 | 
20 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Ftheodorusclarence%2Fnextjs-tailwind-starter)
21 | 
22 | First, run the development server:
23 | 
24 | ```bash
25 | npm run dev
26 | # or
27 | yarn dev
28 | ```
29 | 
30 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
31 | 
32 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file
33 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |     /* inter-regular - latin */
 7 |     @font-face {
 8 |         font-family: 'Inter';
 9 |         font-style: normal;
10 |         font-weight: 400;
11 |         font-display: optional;
12 |         src: local('Inter'),
13 |             url('/fonts/inter-regular-webfont.woff2') format('woff2'),
14 |             url('/fonts/inter-regular-webfont.woff') format('woff');
15 |     }
16 | 
17 |     /* inter-500 - latin */
18 |     @font-face {
19 |         font-family: 'Inter';
20 |         font-style: normal;
21 |         font-weight: 500;
22 |         font-display: optional;
23 |         src: local('Inter'),
24 |             url('/fonts/inter-medium-webfont.woff2') format('woff2'),
25 |             url('/fonts/inter-medium-webfont.woff') format('woff');
26 |     }
27 | 
28 |     /* inter-700 - latin */
29 |     @font-face {
30 |         font-family: 'Inter';
31 |         font-style: normal;
32 |         font-weight: 700;
33 |         font-display: optional;
34 |         src: local('Inter'),
35 |             url('/fonts/inter-bold-webfont.woff2') format('woff2'),
36 |             url('/fonts/inter-bold-webfont.woff') format('woff');
37 |     }
38 | 
39 |     /* Write your own custom base styles here */
40 |     h1 {
41 |         @apply text-3xl font-bold md:text-5xl font-primary;
42 |     }
43 | 
44 |     h2 {
45 |         @apply text-2xl font-bold md:text-4xl font-primary;
46 |     }
47 | 
48 |     h3 {
49 |         @apply text-xl font-bold md:text-3xl font-primary;
50 |     }
51 | 
52 |     h4 {
53 |         @apply text-lg font-bold font-primary;
54 |     }
55 | 
56 |     body {
57 |         @apply text-sm font-primary md:text-base;
58 |     }
59 | 
60 |     .layout {
61 |         /* 750px */
62 |         /* max-width: 43.75rem; */
63 | 
64 |         /* 1100px */
65 |         max-width: 68.75rem;
66 |         @apply w-11/12 mx-auto;
67 |     }
68 | }
69 | 


--------------------------------------------------------------------------------
/contexts/auth.js:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useContext, useState, useEffect } from 'react';
 2 | import { useRouter } from 'next/router';
 3 | const AuthContext = createContext();
 4 | 
 5 | function AuthProvider({ children }) {
 6 |     const [user, setUser] = useState({
 7 |         error: 'you are logged out, and there is no user object, and no token',
 8 |     });
 9 |     const [isAuthenticated, setIsAuthenticated] = useState(false);
10 |     const [isLoading, setIsLoading] = useState(true);
11 | 
12 |     useEffect(() => {
13 |         const token = localStorage.getItem('token');
14 |         console.log('token: ', token);
15 |         if (!(token === null || token === undefined)) {
16 |             loginWithToken();
17 |         }
18 |         setIsLoading(false);
19 |     }, []);
20 | 
21 |     function loginWithToken() {
22 |         localStorage.setItem('token', 'true');
23 |         setIsAuthenticated(true);
24 |         setUser({
25 |             name: 'hello',
26 |             msg: 'Logged in because token in localStorage',
27 |         });
28 |     }
29 |     function login() {
30 |         setIsAuthenticated(true);
31 |         setUser({
32 |             name: 'hello',
33 |             msg: 'Logged in by clicking login button, you still have no token',
34 |         });
35 |     }
36 | 
37 |     function logout() {
38 |         setIsAuthenticated(false);
39 |         setUser({
40 |             error: 'you are logged out, and there is no user object, and no token',
41 |         });
42 |         localStorage.removeItem('token');
43 |     }
44 | 
45 |     return (
46 |         <AuthContext.Provider
47 |             value={{
48 |                 isAuthenticated,
49 |                 user,
50 |                 login,
51 |                 logout,
52 |                 loginWithToken,
53 |                 isLoading,
54 |             }}
55 |         >
56 |             {children}
57 |         </AuthContext.Provider>
58 |     );
59 | }
60 | 
61 | const useAuth = () => useContext(AuthContext);
62 | 
63 | export { AuthProvider, useAuth };
64 | 


--------------------------------------------------------------------------------
/pages/index.jsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from 'react';
  2 | import { NextSeo } from 'next-seo';
  3 | 
  4 | import { useAuth } from '@/contexts/auth';
  5 | import CustomLink from '@/components/CustomLink';
  6 | 
  7 | export default function Home() {
  8 |     const { user, logout, login, isAuthenticated, loginWithToken } = useAuth();
  9 |     const [originLocation, setOriginLocation] = useState(
 10 |         'http://localhost:3000'
 11 |     );
 12 | 
 13 |     useEffect(() => {
 14 |         if (typeof window !== 'undefined') {
 15 |             setOriginLocation(window.location.origin);
 16 |         }
 17 |     }, []);
 18 | 
 19 |     const addToken = () => {
 20 |         loginWithToken();
 21 |     };
 22 | 
 23 |     return (
 24 |         <>
 25 |             <NextSeo />
 26 | 
 27 |             <main>
 28 |                 <section className=''>
 29 |                     <div className='flex flex-col min-h-screen py-12 space-y-4 text-center layout'>
 30 |                         <h1>Learn Auth Redirect Next.js</h1>
 31 |                         <p className='mx-auto max-w-prose'>
 32 |                             If we open a page and it is not logged in, it will
 33 |                             show a full page loader, then when it is fully
 34 |                             rendered, useEffect will run and push to home page.
 35 |                         </p>
 36 |                         <p className='mx-auto mt-4 max-w-prose'>
 37 |                             The blocked-unhandled will show the case when not
 38 |                             using full page loader, and it will flash the
 39 |                             content
 40 |                         </p>
 41 |                         <CustomLink
 42 |                             href='https://theodorusclarence/blog/nextjs-redirect-no-flashing'
 43 |                             className='mx-auto max-w-prose'
 44 |                         >
 45 |                             Check out this blog post for explanation
 46 |                         </CustomLink>
 47 |                         <pre>
 48 |                             {JSON.stringify({ isAuthenticated }, null, 2)}
 49 |                         </pre>
 50 |                         <pre>{JSON.stringify(user, null, 2)}</pre>
 51 |                         {isAuthenticated ? (
 52 |                             <button
 53 |                                 className='mt-8 underline'
 54 |                                 onClick={() => logout()}
 55 |                             >
 56 |                                 logout & remove token
 57 |                             </button>
 58 |                         ) : (
 59 |                             <button
 60 |                                 className='mt-8 underline'
 61 |                                 onClick={() => login()}
 62 |                             >
 63 |                                 login button
 64 |                             </button>
 65 |                         )}
 66 |                         <div className='!mt-8 space-y-4 flex flex-col items-center'>
 67 |                             <p className='mt-4 text-lg text-blue-900'>
 68 |                                 Setting up token, if you add token, then you are
 69 |                                 considered logged in even in a new tab
 70 |                             </p>
 71 |                             <button className='underline' onClick={addToken}>
 72 |                                 Add Token to Local Storage
 73 |                             </button>
 74 |                             <button className='underline' onClick={logout}>
 75 |                                 Remove Token to Local Storage
 76 |                             </button>
 77 |                         </div>
 78 |                         <p className='!mt-12 text-lg text-blue-900 '>
 79 |                             List of page (using Next.js Link), will authorized
 80 |                             if login (token & no token):
 81 |                         </p>
 82 |                         <div className='flex flex-col items-center space-y-2'>
 83 |                             <CustomLink href='/unprotected'>
 84 |                                 go to /unprotected page (everyone can access
 85 |                                 even if not logged in)
 86 |                             </CustomLink>
 87 |                             <CustomLink href='/blocked-unhandled'>
 88 |                                 go to /blocked-unhandled page (will flash
 89 |                                 content, try opening a new tab to see more
 90 |                                 clearly)
 91 |                             </CustomLink>
 92 |                             <CustomLink href='/blocked'>
 93 |                                 go to /blocked page (won't show content if not
 94 |                                 authorized)
 95 |                             </CustomLink>
 96 |                             <CustomLink href='/blocked-component'>
 97 |                                 go to /blocked-component page
 98 |                             </CustomLink>
 99 |                         </div>
100 |                         <p className='mt-4 text-lg text-blue-900'>
101 |                             Try to directly go to (will open a new tab), will
102 |                             only authorized if using token:
103 |                         </p>
104 |                         <div className='flex flex-col items-center space-y-2'>
105 |                             <CustomLink href={`${originLocation}/unprotected`}>
106 |                                 {originLocation}
107 |                                 /unprotected
108 |                             </CustomLink>
109 |                             <CustomLink
110 |                                 href={`${originLocation}/blocked-unhandled`}
111 |                             >
112 |                                 {originLocation}
113 |                                 /blocked-unhandled
114 |                             </CustomLink>
115 |                             <CustomLink href={`${originLocation}/blocked`}>
116 |                                 {originLocation}
117 |                                 /blocked
118 |                             </CustomLink>
119 |                             <CustomLink
120 |                                 href={`${originLocation}/blocked-component`}
121 |                             >
122 |                                 {originLocation}
123 |                                 /blocked-component
124 |                             </CustomLink>
125 |                         </div>
126 |                     </div>
127 |                 </section>
128 |             </main>
129 |         </>
130 |     );
131 | }
132 | 


--------------------------------------------------------------------------------