Cannot use async in page.tsx but i need to use getServerSession
Answered
Saltwater Crocodile posted this in #help-forum
Saltwater CrocodileOP
'use client'
export default async function Login() {
const session = await getServerSession(config)
}this seems to be invalid code, but how can i still get the session?
101 Replies
you can't have an async page component with "use client"
Saltwater CrocodileOP
i know right
but how do i get the session?
remove the "use client"
Saltwater CrocodileOP
but the page also uses react hooks
which require the 'use client'
extract the bit which uses react hooks into its own component
@Jesse extract the bit which uses react hooks into its own component
Saltwater CrocodileOP
since im using this to check if use is logged in, cant i just add it into middleware.ts?
yes that'd be the best use case
creating a function in your middleware and then using NextResponse.redirect if they're not logged in
Saltwater CrocodileOP
hmm, but it seems to be colliding with nextauth here
in what way?
@Jesse in what way?
Saltwater CrocodileOP
well the middleware is invoked only if the matcher matches the page
but also
the matcher is used to determine if page should be locked with requiring auth
Saltwater CrocodileOP
i think so
make it more flexible then
add /login if you need to
Saltwater CrocodileOP
well the middleware wont ever run on /login
well but then
/login would require auth
which doesnt make sense
what
you're literally checking if the page starts with /login
then you're gonna need to add /login to the matcher
Saltwater CrocodileOP
so nextauth stuff is done after the
middleware function is done?since here it says
Saltwater CrocodileOP
/app and all its routes require auth
you can export next auth as default as your doing
and then also export middleware()
Saltwater CrocodileOP
and what is ran first?
nextauth stuff or my middlware
Saltwater CrocodileOP
im getting this so uhh
show me the rest
Saltwater CrocodileOP
Saltwater CrocodileOP
aight
@Saltwater Crocodile since here it says
I would probably not use middleware if this is the case
it's weird
this is why I don't use next auth and make my own auth systems
but anyways
that's besides the point
go back to your /login page
Saltwater CrocodileOP
one sec
Saltwater CrocodileOP
back, so yeah what next
extract client logic into seperate component
Answer
and then your main page can be an async function
and in there you can do your redirect stuff there
Saltwater CrocodileOP
well but if i have some useState's, do i also include the html code which sets them?
yes
just put all client logic in one component
Saltwater CrocodileOP
now i get this
oh nvm
it works
i guess
nice
Mark this as answered and mark the solution
Saltwater CrocodileOP
wait actually
aight i transformed it into smth like this
but it seems pretty uhh weird
just check if there's a session if there's not, then just redirect to /app
@Jesse just check if there's a session if there's not, then just redirect to /app
Saltwater CrocodileOP
the redirect must happen in the extracted element, since useRouter requires 'use client'
don't use router try redirect
This should work I think
Saltwater CrocodileOP
ohhh
whats the difference? (not including it doesnt require to be on client)
well it's easier to redirect in the place where you're actually getting the session
it's cleaner
as well
it's up to you though
Saltwater CrocodileOP
nono i meant whats the difference between the router and redirect method
Saltwater CrocodileOP
it works, tho
i think ill keep this open in case anything bad happens
but theres no way to have all this in 1 file right? i gotta always split it
unless you make your whole page a server component
or find a way to bypass the weird middleware stuff
@Saltwater Crocodile i think ill keep this open in case anything bad happens
do you wanna mark solution?
pls
Saltwater CrocodileOP
ok then, can always make a new thread...
thanks lol
Saltwater CrocodileOP
uhh
how do i close again
go to my answer
click on more and then apps and then mark solution
@Jesse extract client logic into seperate component
probably this message