Where to store user data?
Answered
Salint posted this in #help-forum
SalintOP
I have experience using "standard" ReactJS, where I store user data in a state in the "entry" file of the project (where the router is) and use context to provide that data to all components. (also a setUser function so I can set the state from child components)
I decided to learn Next.js for the benefits of SSR, I tried creating a state in the root layout of the application which didn't work because it's a server component?
What's the standard way to do this in Next.js?
I decided to learn Next.js for the benefits of SSR, I tried creating a state in the root layout of the application which didn't work because it's a server component?
What's the standard way to do this in Next.js?
Answered by averydelusionalperson
I'd think no, you can access localstorage from client, and send it to server actions, api or something. But AFAIK there ain't a way to access localstorage from server components
210 Replies
wdym by user data
@averydelusionalperson wdym by *user data*
SalintOP
userid, username, etc
like the user object in firebase, if u ever used it.
@Salint like the user object in firebase, if u ever used it.
Masai Lion
I have used Firebase
SalintOP
yes but how do i store it globally
as a state.
use context?
like you would do in a regular application
@Salint yes but how do i store it globally
Masai Lion
More context please?
List your goals
Masai Lion
What you want to obtain from your app
@averydelusionalperson ironic lmao
Masai Lion
shush I need this point
SalintOP
well i wanna store the user object from firebase so i can later on use it to retrieve an IdToken to send to my backend to retrieve data
@Salint well i wanna store the user object from firebase so i can later on use it to retrieve an IdToken to send to my backend to retrieve data
Masai Lion
So you want to do this?
# Send data
client > server > firebase
# Receive data
firebase > server > client
# Send data
client > server > firebase
# Receive data
firebase > server > client
right?
thats not really clear
what i want is
store user -> get user token at any time -> send to backend
using fetch or axios
@Salint thats not really clear
Masai Lion
What I mean is that you want to send from the client the data to firebase and then retrieve that data back from Firebase
SalintOP
no
SalintOP
i wanna send the data to my own server
@Masai Lion https://adios-axios.com
SalintOP
not my point
@averydelusionalperson you can use cookies?
Masai Lion
Shushhhh I want to say that
@Salint not my point
Masai Lion
Just dropping the fun fact
SalintOP
my point is store the user object somewhere where i can store it globally
but also cause it to make changes
like a state
for example
@Salint my point is store the user object somewhere where i can store it globally
Masai Lion
Why necessarily globally?
Wouldn’t it be better to store them locally with jwt?
@Salint but also cause it to make changes
what were you using previously? in react I mean
Masai Lion
cookies
@Masai Lion Wouldn’t it be better to store them locally with jwt?
SalintOP
its firebase auth.
i dont control the tokens myself
@averydelusionalperson what were you using previously? in react I mean
SalintOP
state on the main component
@Salint its firebase auth.
Masai Lion
I’ve used Firebase and I would recommend you skip the part of using fbase auth
I would recommend using clerk or next-auth
@Masai Lion I’ve used Firebase and I would recommend you skip the part of using fbase auth
SalintOP
avoidance is not a solution.
@Salint avoidance is not a solution.
Masai Lion
It is if you don’t want any problems
I had many
Many
Trying to use Firebase auth with nextjs
SalintOP
okay lets replace the firebase auth with my own auth
i can store it in cookies yeah?
or localStorage
@Salint i can store it in cookies yeah?
Masai Lion
Yeah
SalintOP
or w/e
@Salint or localStorage
Masai Lion
local can be modified
cookies not so easy
SalintOP
not an issue.
@Salint not an issue.
Masai Lion
if security isn’t an issue then do it local
SalintOP
how do I display different pages depending if a cookie exist
like "/" if cookie exists then display homepage
if not display log in
I do support YouTube videos
SalintOP
Alright
@Salint Alright
Masai Lion
It works for you?
SalintOP
not really.
How about storing a socket connection?
SalintOP
my question is:
How do I store a global state throughout the entire app?
@Salint How do I store a global state throughout the entire app?
Masai Lion
@averydelusionalperson I need advice for the advice
Cookies right?
SalintOP
I mean react state.
useState.@Salint `useState`.
Masai Lion
well create an interface
and export it
save the stuff into local
and use the interface with variables like so:
// you can import it anywhere from your project directly from this file
export interface UserType() {
id: “chezburgr”,
}
const [token, useToken] = useState<UserType | null>(null)SalintOP
yes but i want that on the root.
it doesnt allow useState on the root
cuz it's server component
@Salint cuz it's server component
Masai Lion
try adding a “use client” at the top ?
hehehehe
cuz if you want to use useState you need a client component
SalintOP
do contexts also need a client component?
@Salint do contexts also need a client component?
Masai Lion
I forgor bout that
let me check it
yes you also need client
(that’s what documentation say)
SalintOP
then i need all my components to be client in order to use that state
so it defeats the whole purpose of next.js
@Salint then i need all my components to be client in order to use that state
Masai Lion
that’s a good start to use cookies
please
I beg
Don’t make life more complicated
Use cookies pls
SalintOP
🤦♂️
SalintOP
how do i display different content when the user is logged in?
@Salint how do i display different content when the user is logged in?
Masai Lion
next-auth
with your firestore
SalintOP
without next-auth?
@Salint without next-auth?
Masai Lion
clerk
SalintOP
without the use of third party libraries.
purely cookies.
SalintOP
again, not asking for reasons to avoid. I'm asking for how to.
@Salint again, not asking for reasons to avoid. I'm asking for how to.
Masai Lion
owie chill.
if you explained what you are using and what you expect
we would be very happy to help you
SalintOP
Alright.
Masai Lion
otherwise we can’t be objective with a clear response due to lack of elaboration.
I'm back
so where are we?
@averydelusionalperson so where are we?
Masai Lion
bro doesn’t like jokes.
so now we are serious
Okay, you're sirius
@Salint purely cookies.
I think you can store jwt token
in cookies
once you get to the profile page
try fetching profile date
@averydelusionalperson I think you can store jwt token
Masai Lion
They explicitly mentioned they are not interested that option
SalintOP
I have my own backend that sets a cookie(or sometimes returns it as a response to store in localStorage) token for the user when they log in. After that, I send HTTP requests to my backend to retrieve some data which validates my token and responds with the data if the token is valid, rejects it if it's not.
In Next.js, I'd like to check if this cookie(or localStorage entry) exists to show specific UI. (Login if it doesn't exist, dashboard if it exists).
In Next.js, I'd like to check if this cookie(or localStorage entry) exists to show specific UI. (Login if it doesn't exist, dashboard if it exists).
Using server components if possible cuz i want this Server-side rendered.
@Salint I have my own backend that sets a cookie(or sometimes returns it as a response to store in localStorage) token for the user when they log in. After that, I send HTTP requests to my backend to retrieve some data which validates my token and responds with the data if the token is valid, rejects it if it's not.
In Next.js, I'd like to check if this cookie(or localStorage entry) exists to show specific UI. (Login if it doesn't exist, dashboard if it exists).
yes, you can use cookies function: https://nextjs.org/docs/app/api-reference/functions/cookies
or if you want middleware
we can do that as well
you login
@Salint No, I haven't.
Masai Lion
you are avoiding using cookies/jwt or next-auth mentioning you don’t want reasons to “avoid”
@averydelusionalperson you check token
Masai Lion
exactly
ezpz
@Masai Lion you are avoiding using cookies/jwt or next-auth mentioning you don’t want reasons to “avoid”
SalintOP
I'm not avoiding using cookies or JWT, i'm avoiding using next-auth or any third party library.
@averydelusionalperson yes, you can use cookies function: https://nextjs.org/docs/app/api-reference/functions/cookies
SalintOP
great, so this checks it on the server-side right?
@Salint I'm not avoiding using cookies or JWT, i'm avoiding using next-auth or any third party library.
Masai Lion
you have your answer then.
@Salint great, so this checks it on the server-side right?
yeah, it does. if you want you can use middleware as well
so, you won't need to write functionality for each page
SalintOP
Awesome, one more thing.
What if i want to retrieve a data from my backend but I want it server-side rendered, which means the server is the one who will be sending the request. How can I "forward" the cookies to the backend ?
using fetch or axios or w/e
you can just fetch cookies through the cookies function, and "forward" cookies through request headers ig
SalintOP
is that optimal though?
I'm pretty sure it is
I can't really think of any other way
SalintOP
I mean I can send the token using the authorization header but usually i can send the request and the cookies are sent with them
you mean without using headers
SalintOP
no i can do that but im used to using cookies mostly.
I assume if you use fetch or any lib from server component, then you can access cookies in the backend
I'm not sure tho
I haven't used fetch in server components yet
but I assume it should be like any regular request
SalintOP
alright, have u ever used socket.io?
SalintOP
so, usually, in react, when i make the socket connection i store it in a global state using
useState which i then pass it to all components using contextso i can later on use it to send messages.
how can I do such in next.js since i cant put state on root layout
@Salint how can I do such in next.js since i cant put state on root layout
but you can create seperate file for providers
and wrap children in that provider component
and use state there
^ I think this should help
SalintOP
and i can use this inside server components?
AFAIK no
how would you use react context in server
SalintOP
thats the thing tho, doesn't this defeat the entire purpose of next.js?
can I turn my layout to be a client component but have the children routes be server-side?
@averydelusionalperson how?
SalintOP
isnt the main purpose of nextjs SSR?
ig? but everything can't be server tho, I really don't know how you can share data between server components
it's on server
and If I'm not wrong, context is for browser
SalintOP
alright so how do u suggest if i have something like a forum for example, where i need the articles to be server side rendered but i also want a socket connection to send back notifications, messages, etc.
@Salint alright so how do u suggest if i have something like a forum for example, where i need the articles to be server side rendered but i also want a socket connection to send back notifications, messages, etc.
-> article
-> page.tsx (server component): render articles here using fetch or something get data, and render articles.
-> Messages.tsx (client component): I'm assuming this is realtime messages, so this can be client component. where
you can connect to the socket, and do your magic. This won't run on server, so no problem. You can do your notifications thing here I assume
Main gist is you seperate components to be client or server based on their needs.
-> page.tsx (server component): render articles here using fetch or something get data, and render articles.
-> Messages.tsx (client component): I'm assuming this is realtime messages, so this can be client component. where
you can connect to the socket, and do your magic. This won't run on server, so no problem. You can do your notifications thing here I assume
Main gist is you seperate components to be client or server based on their needs.
SalintOP
but what if i have messages and notifications and i need to share the socket connection
can i embed client components inside server components?
SalintOP
and i cant do the opposite?
I don't think so
you really can't run server on client
SalintOP
alright
thank u so much
ur so helpful.
oh 1 more thing
how can I access localstorage on server components?
@Salint how can I access localstorage on server components?
I don't really think you can, localstorage is client/browser thing
SalintOP
is it possible to send it to the next.js server when u change the route?
I'd think no, you can access localstorage from client, and send it to server actions, api or something. But AFAIK there ain't a way to access localstorage from server components
Answer
SalintOP
ah bummer.
i wanted to store the access token in localStorage
sadge, you can use cookies ig
SalintOP
alright thanks.
Glad that I can help, if your problem is solved. Consider marking answer as solution
SalintOP
Will do.
Thanks ❤️
SalintOP
the other guy wasnt helpful.
😂