Next.js Discord

Discord Forum

Pass data through navigation without search params

Unanswered
XandoR posted this in #help-forum
Open in Discord
Hello there ! πŸ‘‹
I'm looking for a way to pass an email while navigating to a new page without using search params
I would like to redirect my user to a verify-email page after registration, and I need to display the email in here but I would like to do it without the need to use search params
is there anyway I can do that ? global state / context ? or any more direct way to handle that ?

42 Replies

You could use regular params and if there is a db table you could even use generate static params to make the page static
localhost:3000/any-route/[userEmail]
-Src
   -App
      -any-route
        -[userEmail]
           -Page.tsx


Plz excuse the caps
Nah the fact is I dont want the email to be in the url
Pass it as a cookie?
Read the cookie on the page?
@XandoR Nah the fact is I dont want the email to be in the url
Why do we want a page that's custom to a user's email but we don't want it in the URL?
Was told by other people having the email in the URL ( and so, in the navigation history ) is a bad thing for security
As long as there is some sort of security preventing unauthorized access to the page, you would be fine. As long as a regular unauthenticated users cannot access the data, you'll be all right
But if you're really against it, you can assign a unique ID to the user and put that in the URL
But yes passing the email in the cookie would work as well
When I'm talking cookie I mean like an auth cookie that's encoded some way like jwt
Btw this email is not used for authenticating user

Basically, user fills the registration form, then when he sends the form, he is redirected to verify-email route where he can see a message saying "a verification email has been sent to ..." + access to a form to request a new verification email, so I just need email to prefill the form and display the message
Create a unique identifier for the user account and put that in the URL like a uuid or how LinkedIn does it https://www.linkedin.com/in/patrick-macdonald-231640285
Then on the page you can fetch the user information and confirm whether or not the email has been verified or not
Or any additional information (non sensitive information. As you said the user won't be authorized)
@Patrick MacDonald Create a unique identifier for the user account and put that in the URL like a uuid or how LinkedIn does it https://www.linkedin.com/in/patrick-macdonald-231640285
I dont want the server to be involved, this is a client only process
mby cookie are the way then to pass the data from one page to the other ? or session storage but not sure if it's better ?
LOL you're really tying your hands here. You need a page that is unique to the user but we're not allowed to use the server, cookies or the URL?
Just need the email to be passed in the flow client side when I navigate to the next page that's it
πŸ˜„
Well that's a tough one
I guess the only options I have are cookies, url or sessionStorage
Idk which one would be the "best" in this kind of situation
Honestly, when you create the user I would have a column that is uuid, return this uuid to the client and put it in the URL
There's no extra server interaction because you're going to have to create the user one way or another
And the uuid will have to fetch the dynamic data though
Gotta check with better auth if I can make it so the session is created even while email is not verified
You could use a cookie yourself and use JWT to encode it so you don't have to include it in the auth cookie
But again, if you use cookies you will have to check them on the server
@Patrick MacDonald But again, if you use cookies you will have to check them on the server
yeah this is fine, I didnt mention it but my auth server is not inside my nextjs app, this is an external server
Well if you're okay with cookies and the server checking the cookies on sign up, create a cookie with the user email in the cookie encoded with jwt . Then on the page verify the cookie with the server and provide the email
@XandoR Idk which one would be the "best" in this kind of situation
I would say the best is URL with the unique identifier that way you can fetch information on the page such as is the email verified and the email itself(non sensitive)
Also, I would bet money that better auth still creates a session when you log in. Just doesn't Mark the user verified. However I cannot confirm. I am going over the docs right now just to see
Bigeye tuna
#Pass data through navigation without search params
@Patrick MacDonald Also, I would bet money that better auth still creates a session when you log in. Just doesn't Mark the user verified. However I cannot confirm. I am going over the docs right now just to see
If you enable requireEmaiLVerification then it doesnt, but may be I should just disable that and handle the requirement for emailVerification another way
Yup to you
The way I see it to pass info to the page we have params or search params (URL and we can generate a unique value so that we're not sharing the email directly in the URL) or a cookie
I mean you could use local storage in the browser, but like I don't know about the security implications of that
he is redirected to verify-email route
how are you redirecting without server involvement? if its a redirect then it is server-involved. If its not involving server then its just showing a client-component to the next UI
i lean towards cookies rather than URL since you aren't supposed to put auth-states or user-states in the URL. By the moment you have an email, you already validates that the email belongs to a user. If you use URL to store email then theres risk of using someone else's email to complete registration. If you manage to validate that, then at that point just store email in the Cookies....