using localstorage variables in middleware
Unanswered
Dwarf Crocodile posted this in #help-forum
Dwarf CrocodileOP
Hi, I am trying to build a signInCheck middleware that is supposed to redirect a user to the correct page (if the user is not logged in, it will direct them to the sign in page. if they are logged in, it will redirect them to the dashboard).
How do you think I should do that, if the user connectioon details are stored in the localstorage? can I somehow access them from inside the middleware?
How do you think I should do that, if the user connectioon details are stored in the localstorage? can I somehow access them from inside the middleware?
54 Replies
@Dwarf Crocodile Hi, I am trying to build a signInCheck middleware that is supposed to redirect a user to the correct page (if the user is not logged in, it will direct them to the sign in page. if they are logged in, it will redirect them to the dashboard).
How do you think I should do that, if the user connectioon details are stored in the localstorage? can I somehow access them from inside the middleware?
Mini Rex
you are talking about next js middleware right?
if yes then you cannot excess it because local storage is window object and window object is only available in client-side and middleware are executed in edge which is server
if yes then you cannot excess it because local storage is window object and window object is only available in client-side and middleware are executed in edge which is server
Dwarf CrocodileOP
ok, if so is it possible to do it without a middleware? for example a file that has a function that does that?
sorry i didn't see someone else already answered, nvm my message
Dwarf CrocodileOP
I am currently trying to do that in a separate file and run it with getserversideprops
@Dwarf Crocodile ok, if so is it possible to do it without a middleware? for example a file that has a function that does that?
Mini Rex
what auth provider are you using
?
Dwarf CrocodileOP
firebase
@Dwarf Crocodile firebase
Mini Rex
redirection logic can be taken from this https://github.com/shadcn-ui/taxonomy/blob/main/middleware.ts
wait i am sending some code which can might help you
Mini Rex
you can use cookies and cookies are sent in every request
then you can verify this token with
and redirectly logic with https://github.com/shadcn-ui/taxonomy/blob/main/middleware.ts
import { auth } from "./firestore";
const user = auth.currentUser;
const token = user && (await user.getIdToken());
// add token value to cookies then you can verify this token with
js
//server side
//use firebase admin sdk
const decodeToken = await auth.verifyIdToken(token);and redirectly logic with https://github.com/shadcn-ui/taxonomy/blob/main/middleware.ts
Dwarf CrocodileOP
thanks! trying it right now
@Dwarf Crocodile thanks! trying it right now
Mini Rex
happy to help
@Mini Rex you can use cookies and cookies are sent in every request
js
import { auth } from "./firestore";
const user = auth.currentUser;
const token = user && (await user.getIdToken());
// add token value to cookies
then you can verify this token with
js
//server side
//use firebase admin sdk
const decodeToken = await auth.verifyIdToken(token);
and redirectly logic with https://github.com/shadcn-ui/taxonomy/blob/main/middleware.ts
Dwarf CrocodileOP
i'm having a problem with the cookies, I set it up but document is not defined in the middleware
since the middleware is executed on the server side, I cant use document, therefore cant setup or read the cookies
Mini Rex
// My _middleware.js file
import { NextRequest, NextResponse } from 'next/server'
export function middleware(req) {
let res = NextResponse.next();
let cookie = req.cookies["my_cookie_name"];
return res;
}
import { NextRequest, NextResponse } from 'next/server'
export function middleware(req) {
let res = NextResponse.next();
let cookie = req.cookies["my_cookie_name"];
return res;
}
by the way i just found out that middleware doesn't support firebase sdk
so that solution is not going to work
Dwarf CrocodileOP
woohoo here are my cookies
@Dwarf Crocodile woohoo here are my cookies
Mini Rex
i didn't get it?
Dwarf CrocodileOP
I believe it does support it actually as I did use it in the past
the req.cookies thing worked perfectly
trying to run the firebase verifyidtoken now
Mini Rex
let me know
i saw in github it not suppost to work but let's see
Dwarf CrocodileOP
ok it does seem like it wont work
i will try running it as a regular server side file with getserversideprops
@Dwarf Crocodile i will try running it as a regular server side file with getserversideprops
Mini Rex
it will work in getserversideprops
but don't use edge as runtime
Dwarf CrocodileOP
what does that mean? how can i make sure im not using edge?
@Dwarf Crocodile what does that mean? how can i make sure im not using edge?
Mini Rex
i am not sure in next js page directory
most probably default is not edge
edge means that executes as near as possible but that costs you less functionality, less memory and less time
that why you can execute verify function in server but not edge (middlware )
Dwarf CrocodileOP
what prop am I supposed to return to the function? I am not really looking for a specific value from the server, pretty much wanting the server to redirect the user if they're not logged in
@Mini Rex edge means that executes as near as possible but that costs you less functionality, less memory and less time
Mini Rex
but this also many fast response
@Mini Rex that why you can execute verify function in server but not edge (middlware )
Dwarf CrocodileOP
oh i understand
@Dwarf Crocodile what prop am I supposed to return to the function? I am not really looking for a specific value from the server, pretty much wanting the server to redirect the user if they're not logged in
Mini Rex
you know i don't have big experience in next js + firebase i try to use next auth whenever i can
so i don't know how to do it
struggle it with it too in one of my project i just start doing this
...sending code
...sending code
i am unable to find code
but it look something like this
but it look something like this
return auth.user?<div>show page</div>:</div>please login for getting this page</div>;Dwarf CrocodileOP
@Mini Rexstill working on this issue and nothing has worked so far, im absolutely clueless on how to solve it
everything worked well on the middleware besides the actual request to firebase, as you said its not working in the middleware.
for some reason the getserversideprops function wont execute
@Dwarf Crocodile for some reason the getserversideprops function wont execute
Mini Rex
Can you link github
Do this
As i said before it is using edge that mean less functionality that mean no support for firebase admin sdk
@Mini Rex Do this
Mini Rex
Add node js that will make it work
Dwarf CrocodileOP
ok finally fixed it i am really really thankful for your help @Mini Rex
Mini Rex
np bro happy to help
Dwarf CrocodileOP
i actually have one more question, is it possible to create a page like _app.ts that will only affect pages I want to protect with authentication?
Basically instead of having a getServerSideProps function in each one of the protected pages, I want the new file to have the getServerSideProps function and remove all the duplicated code of the protected pages
what do you think? is it even possible or do i have to create a getServerSideProps function for each page?
Basically instead of having a getServerSideProps function in each one of the protected pages, I want the new file to have the getServerSideProps function and remove all the duplicated code of the protected pages
what do you think? is it even possible or do i have to create a getServerSideProps function for each page?
@Dwarf Crocodile i actually have one more question, is it possible to create a page like _app.ts that will only affect pages I want to protect with authentication?
Basically instead of having a getServerSideProps function in each one of the protected pages, I want the new file to have the getServerSideProps function and remove all the duplicated code of the protected pages
what do you think? is it even possible or do i have to create a getServerSideProps function for each page?
Mini Rex
you can try doing that if it doesn't work make function call it from every getserverprops it will work the same
Dwarf CrocodileOP
alright I will try it now
Mini Rex
okay