Next.js Discord

Discord Forum

404 Error when trying to directly access Users Profiles, I need some help making this work

Answered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
I'm working on implementing user profiles, similary to how Facebook does it. What I want is after a user creates an account their profile to be accessible at the following link:

I'm using Supabase, and in my database I have a column called user_id which holds the UUID of each user. I'm not sure if it's safe to use that value directly or if I should generate a different UUID for this purpose, so if you know please let me know, but currently that's what I'm using.

When I try to directly access what's suppsoed to be the link to the user profile, by copying the UUID from Supabase and typing http://localhost:3000/ro/user/id in the URL, it gives me a 404 error.

Also I need to make it know when you access a profile if that profile is yours (if you're logged in) and I need to know how the link would look like when someones tries editing their profile
Answered by Sun bear
I solved it! 😎
View full answer

72 Replies

mydomain/lang/user/[userid].com

None of the provided files look look like they end in the supplied path?
mydomain/lang/my-profile

Looks like this should be it?
@Jboncz mydomain/lang/user/[userid].com None of the provided files look look like they end in the supplied path?
Sun bearOP
I have updated the thread, I forgot to add the // src/app/[locale]/user/[userid].page.tsx file which is the file that is supposed to be the dynamic file for the user ID.
πŸ™‚ sounds good, that was just my first thought when I saw. Im mobile right no so I cant really look at code, ill check back later.
Well I cant promise anything seems like a really complex project, not having the actual repo will make it difficult, but I will look later. πŸ™‚
@Jboncz Well I cant promise anything seems like a really complex project, not having the actual repo will make it difficult, but I will look later. πŸ™‚
Sun bearOP
If needed be I can invite you to the Repo, it's a private repo but I don't mind inviting if that would make it easier to help. It is a big and complex project indeed 😁
You have a multitude of questions being asked. in the first post. I would number the questions.

I'm using Supabase, and in my database I have a column called user_id which holds the UUID of each user. I'm not sure if it's safe to use that value directly or if I should generate a different UUID for this purpose, so if you know please let me know, but currently that's what I'm using.


This question, there is nothing wrong with using the actual UUID of the user. Even thought this dude is cringy to me, he makes some good points here. Idk what point your project is at. https://www.youtube.com/watch?v=a-K2C3sf1_Q
Sun bearOP
I wanted to make sure it's okay exposing a user's UUID like that.
I mean, as long as I cant impersonate a user by just having their UUID. UUID isnt 'secure' the second its exposed to the client.
Sun bearOP
I see, so what matters is not exposing the user's session token right ?
Correct.
Sun bearOP
I'm starting to learn 😁
How are you doing authentication?
In your project?
@Jboncz How are you doing authentication?
Sun bearOP
I am using Supabase Auth and Zustand
I can share the code if needed
No need right now. Just asking preliminary questions.
When you access the 'profile' page. You should send a request to your backend to first validate if you are viewing your profile or viewing someone elses. The response can return specific data based on if you are the user, or viewing someone elses page, if you have edit capabilities, you have to check that auth EVERYTIME before anything is 'saved'
@Jboncz When you access the 'profile' page. You should send a request to your backend to first validate if you are viewing your profile or viewing someone elses. The response can return specific data based on if you are the user, or viewing someone elses page, if you have edit capabilities, you have to check that auth EVERYTIME before anything is 'saved'
Sun bearOP
Okay that is very good to know, I don't think I have that implemented yet, I didn't get to editing profiles yet because I need to have them accessible first so that I can see them.

I did have them accessible previously but they were static, as in it was just a simple page as in profile.tsx.
So now I'm moving to the next step which is to make it dynamic, and I've already laid the ground work for that it's just that it's not working yet, so that's what I'm trying to figure out now, I suspect the issue is related to the middleware and navigation files, but I don't know how to update them given that the profile page is supposed to be dynamic now.

Those 2 files are still set-up for the static singular profile page (As in they have no idea they're supposed to work with user IDs now)
Sun bearOP
Plus I'm not even sure how the website would know which user ID belongs to which user profile at the moment, haha.
Oh I was assuming you are storing that in your authentication process.
I find it easier to map complex functions out in something, it allows you to ride the pseudo code, doesnt have to be perfect just a general idea
@Jboncz Click to see attachment
Sun bearOP
Oh, not yet. That's why I created the thread cause I think there's still a few things that need to be set-up in order for this to work properly, and I have no idea what those things are.

For example you mentioned he use of auth cookies in the technical draw, I don't even know if I'm using auth cookies at the moment.
@Jboncz I find it easier to map complex functions out in something, it allows you to ride the pseudo code, doesnt have to be perfect just a general idea
Sun bearOP
Yup, I agree, visualising what needs to be done makes it easier to understand it.
Yeah thats mucho importante.
Sun bearOP
Also I'm not even sure how the route is supposed to work when you're editing / updating your profile.

Would it need to add a /edit at the end of the route or would it be just a alternative view using the same route.
Well, two ways to do it. Either reroute them to seperate pages that again have auth checks in place? Or you render based on the type of person your backend says you are.
Sun bearOP
Plus it would need to know WHEN to display the edit buttons, if the profile you're viewing is not yours, the page will look a bit different, for example there would be no edit buttons and there would be a different set of actions you can make, compared to if the profile was yours.
if(owner) return (#Unknown ChannelEditThings</>)
else{
retrun (#Unknown ChannelPublic things</>)
}
I think some websites use dynamic views, while others use an additional /edit route, not sure which one is the most optimal.
Yeah if I was doing it, it would be a single route.
but I know how my environment is setup from start to end. I know who is navigating to every single page.
In fact I log out every single navigation for every user. userbase of about 2-4k a day.
Sun bearOP
I think for a beginner like me it would be easier to make the Edit page a different route, since that would allow for separation of concerns / code separation.
Yes, I agree.
Sun bearOP
I think, not sure if that's how it would work but I imagine having a single page with all the code required for both the editing information process and just viewing the profile would make that page code quite big complex.
But what your trying to do isnt what I would say is a begginer project πŸ˜„ not a bad thing
Sun bearOP
I agree 😁
Or right off the bat you make it a form, and it either renders as a read only input field or editable input field. If its editable your the owner and a save button is exposed.
Sun bearOP
Ohh right I think that's what I'm doing with my sign-up page
It's like a form that loads different views, but each view has its own file with its own code
Then I just import all the required files in the "mother" file
And such I have separated code
Without having 1 single file with over 500 lines of code
Instead I have like a few different files with like 100 lines of code each that do the same thing
Exactly!
πŸ™‚
Modularized externally so you dont have to code dump into a single file.
Yeah so you need to understand your authentication first and foremost. You need to be able to tell who based on authentication. You should build functions that get you a persons information based on auth session so you can utilize it on the backend.
That is the first thing you should know the ins and outs of.
@Jboncz Yeah so you need to understand your authentication first and foremost. You need to be able to tell who based on authentication. You should build functions that get you a persons information based on auth session so you can utilize it on the backend.
Sun bearOP
I think I already have access to that, I do have user sessions implemented, because I'm currently logging that and I can see them. So that is already functional, I just need some help with setting things up.
I would start with making a page, when you navigate to that page there is a call to the backend and returns your name.
Idk anything about supabase auth structure :/
Okay, so it already knows who you are as you traverse around to any page.
Sun bearOP
Yup
then you should be able to do this pretty easily I think.
Sun bearOP
That's what I mean, I just need a bit of help with properly setting things up so that it works like I need it to.
That's why I shared that much code so that someone can help me with just updating it so that it works, I already have things working, they just need to be connected properly and I don't know how to do that 😁
By the way I'm not a programmer myself, I use documentation and AI for the most part for development, and sometimes programmers help me as well 😁

@Jboncz
I kinda gleaned some of that, unfortunately the amount of work I would have to do to get this functional for you is more than I am willing to give, I got work projects of my own to keep my brain busy with regards to ecomplexity.
Sun bearOP
Oh, so you're saying this is quite complex to set-up right ?
Well, its not super complex, its just complex in respect to you having to know how all the parts work together.
Sun bearOP
I see, so it's a matter of understanding the codebase which would take some time, no worries. I thought it would be something easy to help me with given that most things are working, that's why I asked for help.

I'll wait and see if someone else is interested in helping and in the meantime try to figure it out myself, I'll find a way to make it work, even if nobody wants to help me with this one, so no worries 😁
Sun bearOP
You did give me an idea about what I need to do and those diagrams will be helpful, so thank you for that @Jboncz

Much appreciated πŸ™πŸ»
Sun bearOP
I solved it! 😎
Answer