Next.js Tutorial - 71 - Securing Pages Client-side

📱 Follow Codevolution

[Codevolution]

Use Coupon Code 'CODEVOLUTION' for 50% OFF lifetime discount applied to any upgraded subscription

[ngelevskiblagoja]

According to the docs, the way to use useSesion() for protecting pages is like this:

import { useSession, signIn } from 'next-auth/react'

function Dashboard() {
const { status } = useSession({
required: true,
onUnauthenticated() {
// The user is not authenticated, handle it here.
signIn()
},
})
return (
<div>
<h1>Dashboard</h1>
</div>
)
}

export default Dashboard

[mamlzy]

Here is the UPDATED and much easier way, to protect pages for "Unauthenticated" user.
next-auth Version 4 :

import React, { useEffect } from 'react';
import { useSession, signIn } from 'next-auth/react';

export default function Dashboard() {
const { status } = useSession();

useEffect(() => {
if (status === 'unauthenticated') signIn();
}, [status]);

if (status !== 'authenticated') {
return <h2>Loading...</h2>;
}

return (
<>
<div>Dashboard</div>
</>
);
}

[HTNT]

how come the useSession hook worked in the Navbar component but not the Dashboard component? Is it because the Dashboard component is under the Page directory?

[nahidfaraji]

Update---

import {useSession, signIn} from 'next-auth/react';


function Dashboard(){
   
    const {status} = useSession();
   
    if(status === 'loading'){
        return <h2>Loading...</h2>
    }
    if(status === 'unauthenticated'){
        return <h2>Access Denied</h2>
    }

    return(
        <>
            <h1>Protected page</h1>
            <p>You can view Dashboard Page, because you are Signed In</p>
        </>
    )
}

export default Dashboard;

[siemen_subbaiah]

Congratulations for 300k Subscribers 🥶🥵

[geymonr]

That next-auth useSession store data in browser session which could be visible in application section or no?

[prathap.karaka]

First time first comment and like, u r amazing sir

[joerodrigo]

is there a way we can do it like in a config file? should I do the checking for all my protected pages?

[prabhatkumar]

Can you please make video on sveltekit.

[LarsRyeJeppesen]

This shows a limitation of file based routing. Session validation should be done in the routing

[omeatai]

An alternative to redirect to Home Page:

import React from "react";
import { useSession, signIn } from "next-auth/react";
import { useRouter } from "next/router";

export default function Dashboard() {
const router = useRouter();
const { data: session, status } = useSession({
required: true,
onUnauthenticated() {
router.push("/");
// signIn();
},
});
console.log("session => ", session);
console.log("status => ", status);

return (
<div>
<h1>Dashboard Page</h1>
</div>
);
}

[databrokr]

I think this would be a very easy way for Updated version:

import { useSession } from 'next-auth/react';

function Dashboard() {
const { data: session, status } = useSession();
return (
<>
{status === 'loading' && <h2>Loading...</h2>}
{!session && <h1>You are not Authorized</h1>} // or you can sign in with if statement here
{session && status === 'authenticated' && <h1>Dashboard</h1>}
</>
);
}

export default Dashboard;

[asifuzzamanbappy]

if you want to see something "interesting" then try this "scenario" for a change 🍪

step 1: when you are logged out, visit "/dashboard" from browser by typing url in "address bar"
step 2: assuming you have authentication process is in place and you will be "prompted" to "login" to see that page, which is what expected
setp 3: (here's de fun part!!) now go to "home" page and "logout" and see which page its "redirects" to 😁


it took me quite a few times to say it mildly to figure this out, why this was happening!! and then it clicked, remembering about "setting cookie" concept from SSR and got it to route back to "/", but it was quite a "fun - not so much at first 😁" thing to dabble with

try it on your accord and if you need any help to solve or "re-produce" this scenario, please feel free to reply here, happy learning to us all :)