(Supabase + Next JS, handling a user after logging in)
Answered
Atlantic herring posted this in #help-forum
Atlantic herringOP
Hi guys. So I've created a signup and login page with NextJS and Supabase by following the tutorial here, on the docs (https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs).
It's the next pieces of the puzzle that are confusing me. I genuinely have no clue how to do this. I want the user to login and be redirected to a page (localhost:3000/interface). This is the easy part. just using localhost as a placeholder for now, there is an actual URL that exists.
I want all of the content on this page to be unique, depending on the user logged in. Lets assume I have a user who during the signup process filled in a field titled 'NAME' with the string (Rob). (I'm deliberately making this example overly simple).
When this user logins into the page, they should be greeted with the message Hello Rob. I know this can be done easily just on the Frontend with stuff like props, but I want to utilise the backend database for this. How can I proceed?
It's the next pieces of the puzzle that are confusing me. I genuinely have no clue how to do this. I want the user to login and be redirected to a page (localhost:3000/interface). This is the easy part. just using localhost as a placeholder for now, there is an actual URL that exists.
I want all of the content on this page to be unique, depending on the user logged in. Lets assume I have a user who during the signup process filled in a field titled 'NAME' with the string (Rob). (I'm deliberately making this example overly simple).
When this user logins into the page, they should be greeted with the message Hello Rob. I know this can be done easily just on the Frontend with stuff like props, but I want to utilise the backend database for this. How can I proceed?
Answered by alfonsüs ardani
Thats the ssr, nextjs-esque method,
Or you can do the traditional react way where you just handle it all on the client. User input data, then call fetch on the client, get some data, and render graph on the client. This means importing the graph chart library code to the client
Or you can do the traditional react way where you just handle it all on the client. User input data, then call fetch on the client, get some data, and render graph on the client. This means importing the graph chart library code to the client
53 Replies
Atlantic herringOP
Sorry if this is kinda difficult to understand, its pretty late here. lmk if yall need more explanation pls
the reason I want it to be from the server is because I'm actually building an app that's going to take input (assume hours of sleep) and then do some stuff with it, and display it back to the user
the reason I want it to be from the server is because I'm actually building an app that's going to take input (assume hours of sleep) and then do some stuff with it, and display it back to the user
this is the (very little code that does nothing except redirecting to google.com) code that I've written so far. (I'm aware that its messy, and i should use an else block and what not)
>How can I proceed?
this is where you utilize JWT stored in the secure cookie for two reason:
1. you can store trusted data that the user is indeed, rob and is verifiable
2. dont need to worry about tampering but jwt is anti-tampered (but not idiot proof)
u can set the cookie during login success, and fetch that cookie in subsequent resource request
this is where you utilize JWT stored in the secure cookie for two reason:
1. you can store trusted data that the user is indeed, rob and is verifiable
2. dont need to worry about tampering but jwt is anti-tampered (but not idiot proof)
u can set the cookie during login success, and fetch that cookie in subsequent resource request
@alfonsüs ardani >How can I proceed?
this is where you utilize JWT stored in the secure cookie for two reason:
1. you can store trusted data that the user is indeed, rob and is verifiable
2. dont need to worry about tampering but jwt is anti-tampered (but not idiot proof)
u can set the cookie during login success, and fetch that cookie in subsequent resource request
Atlantic herringOP
makes sense, thanks! in reality, im planning on something a bit more complex though.
once the user enters the interface page, theres a couple of forms that will have to be filled by the user. i then need to send all of that data to my database, then I need to process it (model it against a graph, do some basic stats like calculating a mean and so on), and then return it to the front end. I get that I can probably send all the info to my backend using a cookie, but post that, what exaclty should I do?
once the user enters the interface page, theres a couple of forms that will have to be filled by the user. i then need to send all of that data to my database, then I need to process it (model it against a graph, do some basic stats like calculating a mean and so on), and then return it to the front end. I get that I can probably send all the info to my backend using a cookie, but post that, what exaclty should I do?
this is my first time taking most of the rails off and trying to build a functioning application all by myself, without essentially copy pasting large bunches of code from SO
youre using nextjs as middle-man backend right?
@alfonsüs ardani youre using nextjs as middle-man backend right?
Atlantic herringOP
yes
"I get that I can probably send all the info to my backend using a cookie, but post that, what exaclty should I do?"
well.. what do you want to do?
well.. what do you want to do?
what do you need to do?
what is the problem?
im confused sorry..
@Atlantic herring
@alfonsüs ardani im confused sorry..
Atlantic herringOP
haha all good. so initially, when I posted this, I was completely lost (no idea how to proceed with the coding). So far here is what I have gauged I can do to proceed.
Create the interface page and redirect the user to it after they login (a trivial code change).
Create a couple of forms on the interface page, and send the data to my supabase database (i can do this by first creating all the required tables, and sending the data to my backend via a cookie).
here is what I'm still stuck on (I deleted a couple things right now whilst typing this, rubber ducking does help haha)
How can I create a graph of the data the user has entered (I want this form to appear once a day, every day, asking the user how many hours they've slept. Based on the data they enter, I want to show a graph of their sleep vs days. I have no idea how I'm going to do this.
Create the interface page and redirect the user to it after they login (a trivial code change).
Create a couple of forms on the interface page, and send the data to my supabase database (i can do this by first creating all the required tables, and sending the data to my backend via a cookie).
here is what I'm still stuck on (I deleted a couple things right now whilst typing this, rubber ducking does help haha)
How can I create a graph of the data the user has entered (I want this form to appear once a day, every day, asking the user how many hours they've slept. Based on the data they enter, I want to show a graph of their sleep vs days. I have no idea how I'm going to do this.
I've written the necessary code and now post logging in, the user is sent to the interface page
You can store the "data that user entered" in a searchquery and perform a partial rerender of the whole page (requesting the graph part to be ssr'd) and reading search param on the page to show the specified graph
Thats the ssr, nextjs-esque method,
Or you can do the traditional react way where you just handle it all on the client. User input data, then call fetch on the client, get some data, and render graph on the client. This means importing the graph chart library code to the client
Or you can do the traditional react way where you just handle it all on the client. User input data, then call fetch on the client, get some data, and render graph on the client. This means importing the graph chart library code to the client
Answer
@Atlantic herring I've written the necessary code and now post logging in, the user is sent to the interface page
by interface page, you mean dashboard page?
@alfonsüs ardani by interface page, you mean dashboard page?
Atlantic herringOP
yes
@alfonsüs ardani Thats the ssr, nextjs-esque method,
Or you can do the traditional react way where you just handle it all on the client. User input data, then call fetch on the client, get some data, and render graph on the client. This means importing the graph chart library code to the client
Atlantic herringOP
think I'll go this way to be honest, just more familiar for me
@Atlantic herring yes
have you protected your dashboard page?
@alfonsüs ardani have you protected your dashboard page?
Atlantic herringOP
oh right, I have to figure that out as well. I haven't yet. But that doesn't seem to hard
the ssr way is imo easier and more intuitive but it does rely on the tangled mess of search params
each way has their own tangled mess
with the traditional way you're tangled with state management and so on
Atlantic herringOP
i just want the quickest and easiest way to be honest. this app wont be deployed, so I can afford to have slight oversights on the security
ie having an unprotected dashboard page
Atlantic herringOP
that being said, is there any place where I can just copy and paste code for components? I remember material UI did this when I used react like years ago.
I don't have it in me to create a good looking question form right now, and its frankly grunt work
@Atlantic herring I don't have it in me to create a good looking question form right now, and its frankly grunt work
Thats why i just do all server and little client code as much a possible
@alfonsüs ardani Thats why i just do all server and little client code as much a possible
Atlantic herringOP
don't got a choice in making this sadly haha
im currently just searching github for a form component
interesting
so its a localhost app for a client not for you
@alfonsüs ardani so its a localhost app for a client not for you
Atlantic herringOP
yes
a hypotethical client though
just get shadcn if you want quick copy pasting that just works
using tech that you already know like tailwind and radix
@alfonsüs ardani just get shadcn if you want quick copy pasting that just works
Atlantic herringOP
haha id just found their website, thanks!
chakra is also nice if you want material-like but not as bloated as material
daisy-ui if you want little-to-no-js and just pure styled elements
dont forget to get re-charts or other chart components
@alfonsüs ardani dont forget to get re-charts or other chart components
Atlantic herringOP
oh thank you, i didnt know this existed
that makes my life way easier, i was gonna go mental figuring out how I'd somehow code a graph on the FE
just use chatgpt and ask what libraries are available for xyz or just look around the google
react has big ecosystem
Atlantic herringOP
yea, thats the upside with react
@alfonsüs ardani just use chatgpt and ask what libraries are available for xyz or just look around the google
Atlantic herringOP
haha, used to do that a while ago. time to get back to it i guess
@alfonsüs ardani so its a localhost app for a client not for you
Atlantic herringOP
the end goal is to make it a packaged desktop application, by using electron or something of the sort
Okie dokie
Goodluck