#How can i secure routes?

37 messages · Page 1 of 1 (latest)

glossy parrotBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

ivory fable
#

which route are you trying to secure? is it a page.tsx or a route.ts

#

you can secure them by checking the necesssary checks first before rendering the page or processing the data

formal pelican
#

its a page.tsx

#

sorry if i seem dumb cause im new

ivory fable
# 
// page.tsx or layout.tsx
const session = await getAuth()
if(session) return <>Hello World</>
if(!sessin) redirect('/login')
#

you can also protect them via next.js's edge middleware

formal pelican
# ivory fable ```tsx // page.tsx or layout.tsx const session = await getAuth() if(session) ret...

alright thanks, so i already have a working login that fetches from the backend already and i've also stored it into redux store.
so basically the response of the login action that i would receive is:

{
    "status": 200,
    "message": "Success",
    "token": "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaGlyb2phcEBnbWFpbC5jb20iLCJlbWFpbCI6ImRoaXJvamFwQGdtYWlsLmNvbSIsIm5iZiI6MTcwMTYxMTI4MywiZXhwIjoxNzAxNjEzMDgzLCJpYXQiOjE3MDE2MTEyODMsImlzcyI6Iklzc3VlciIsImF1ZCI6IkF1ZGllbmNlIn0.ZUBj7qX1YqIKJoFUQnXbmSPvQbe41yVga9OMuBfvw355_DuyykGMxrNY67pkq2fiOWrs0UghnllJzpvGapp8bQ",
    "tokenExpiration": "2023-12-03T14:18:03.4132094Z",
    "user": {
        "id": "bc98dbe6-ae32-48c1-a05a-b55c3e17898b",
        "name": "User1",
        "phoneNumber": "0818693080",
        "email": "[email protected]",
        "gender": "Male",
        "birthdate": "2023-12-02T00:00:00"
    }
}

ive stored it like this:

interface User {
  id: string;
  name: string;
  phoneNumber: string;
  email: string;
  gender: string;
  birthdate: string;
}

interface UserState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  tokenExpiration: Date | null;
}

const initialState: UserState = {
  user: null,
  token: null,
  isAuthenticated: false,
  tokenExpiration: null,
};

but i dont really know how can i utilize the token, could u help me?

ivory fable
#

Then you can check and validate the cookie for every request to the server

formal pelican
ivory fable
#

That way, you do auth checks at the server and not in the client to reduce waterfall effect

formal pelican
ivory fable
#

Get cookie using cookies().get('auth')

#

Check the docs

formal pelican
ivory fable
# formal pelican whats waterfall effect?

Like how you make multiple roundtrips in the client to fetch data at first page load instead of getting everything ready at the server then passing it to the browser

ivory fable
#

I cant help if u dont specify which part you dont understand

formal pelican
ivory fable
#

Dont you want to secure routes?

formal pelican
#

yeah i want to

ivory fable
#

If you want to secure routes then you have to check every request to the server no?

#

For that particular route

formal pelican
#

oh so what that request to server means like accessing a certain page?

#

i dont really understand the terms you use sorry haha

ivory fable
#

Yess but not only that, but stuff like fetch to Next.js route.ts, or Server Actions.

Basically any server environment

#

No need to say sorry, just clarify what you dont understand. No pressure we've all been there

#

You can check user cookie first (and preferably validate them) before returning components or do other stuff

formal pelican
#

wehhh kak baru liat profilenya alumni binus ya wkwkwk

ivory fable
#

Yeah

#

Better use english soalnya ini server publik

formal pelican
#

damn okok

ivory fable
#

You can dm me if you need clarication in bahasa, as a perk of finding me here.

formal pelican