How to protect page in next JS?

Unanswered

Rex posted this in #help-forum

RexOP

2023-12-18T10:59:30.000Z

I know there many tutorial that explains the code part of this question but I want to understand the approach to use.

In my app the user registers using email, password and then redirected to the "create profile" page where he enter personal details.
Now I want to protect all other routes (eg home, clubs etc) until he creates the profile
How should I do it?

I understand two ways to do this
1. At every api request I make api call to the db and check if the user has created the profile or not.
2. I add client side check on each route which will first check in teh local storage if user present since I will be storing it in local storage once user creates it and if not present then make api call to db

I thing second approach is better but I want to know if there is a better approach because I believe the checking the local storage will decrease performance

18 Replies

@Rex I know there many tutorial that explains the code part of this question but I want to understand the approach to use. In my app the user registers using email, password and then redirected to the "create profile" page where he enter personal details. Now I want to protect all other routes (eg home, clubs etc) until he creates the profile How should I do it? I understand two ways to do this 1. At every api request I make api call to the db and check if the user has created the profile or not. 2. I add client side check on each route which will first check in teh local storage if user present since I will be storing it in local storage once user creates it and if not present then make api call to db I thing second approach is better but I want to know if there is a better approach because I believe the checking the local storage will decrease performance

Northeast Congo Lion

2023-12-18T11:08:56.000Z

I use next-auth actively. Some like it, some hate it - I enjoy it.

Takes care of basic auth and supports OAuth. Easy to get started and extend imo.

Some good alternatives out there but it's a good package.

RexOP

2023-12-18T11:12:14.000Z

I have integrated the next-auth in my app

I want to know the approach to use once user is signed in

Northeast Congo Lion

2023-12-18T11:13:52.000Z

you need to protect routes.

in next config

I usually protect a whole rotue

e.g

/dashboard is protected

/auth is not

/dashboard only accessible if logged in, so /dashboard/profile etc

etc

and /auth/login, /auth/register

https://next-auth.js.org/configuration/nextjs You can also do this

export const config = { matcher: [....] }

you can pass in dynamic, wildcard routes etc