Reference a user on private page

Help
1

Hi all!

I’m quite new to identity development, have worked a little on the admin side but not created much myself previously, my only other experience was with AWS Cognito - wanted to give something else a try this time around.

I’m trying to familiarise myself with the basic building blocks of creating an authenticated site, and have deployed this sample: github DOT com/auth0/nextjs-auth0/tree/main/examples/kitchen-sink-example to Vercel. I’ve been playing around with it making minor changes (new to Next.js too) but have become stuck trying to do something that I think should be pretty simple for a few hours now…

I’ve seen how you can reference the logged in user here (github DOT com/auth0/nextjs-auth0/blob/main/examples/kitchen-sink-example/pages/profile.tsx) with for example:

                    <pre data-testid="profile">{JSON.stringify(user, null, 2)}</pre>

and can also log that to the console. I’ve been trying to work out how to obtain that user info, and it appears to come from either/or: useUser, withPageAuthRequired functions. So I thought I’d make a small change to the ‘shows’ api here: (https://github[.]com/auth0/nextjs-auth0/blob/main/examples/kitchen-sink-example/pages/api/my/shows.ts). Instead of searching for shows containing ‘identity’ I wanted to try and make it search for shows containing the user’s name for example.

    const response = await fetch('https://api.tvmaze.com/search/shows?q=identity');

However… I can not figure out how to make ‘user’ accessible there, wondering if instead I need to grab it on the shows’ page https://github[.]com/auth0/nextjs-auth0/blob/main/examples/kitchen-sink-example/pages/shows.tsx beforehand and pass it on to the API.

I’ve started a few Next.js tutorials as I suspect I’ve probable got some misunderstandings there but I can’t figure out how to get user without changing this part on the page:

export default withPageAuthRequired(function TvShows(): React.ReactElement {

to be like this:

export default withPageAuthRequired(function Profile({ user }) {

But then that would break the functionality anyway.

I assume this is something simple and my lack of JS knowledge is making me struggle here, how would I make the code let me send user to the tvmaze api?

Know this is getting a little long now, but also have two follow up questions:

  1. Once I’ve figured this part out, what is the best practice way of storing and returning data for each user, is there a library that allows me to link up to a database, for example a DynamoDB table to store objects?

  2. When trying to troubleshoot earlier issues, I grabbed the JWT from the browser and put it into jwt.io to decrypt, but couldn’t get it to display, even after using entering the decryption key. Am I doing something wrong here?