Next.js Protected Routes: Require User Profiles with Kinde (EASY!)

Summary

This video script outlines the process of user onboarding for an application, focusing on the 'Potl Pal' example. It details the importance of collecting complete user profiles post-sign up and demonstrates gating access to certain pages until profiles are fully created. The script covers technical implementations using Next.js, Auth0 for authentication, and Zeta for database management, highlighting the setup of a multi-step form and the significance of required user information like names and usernames for event participation.

Takeaways

• 📝 The video discusses the process of user onboarding in an application called 'Potl Pal', focusing on gating access to certain pages until the user completes their profile after signup.
• 🔒 It emphasizes the importance of collecting essential information like name and username for adding people to events, which is why the rest of the pages are gated until the profile is complete.
• 🔄 The presenter demonstrates the use of Next.js 14 with the App Router for routing and the use of K for authentication, which is a sponsor of the video.
• 🗃️ The video mentions the use of Zeta as the database to store user profile information separately from the authentication data stored in K.
• 🛠️ The presenter shows the setup process in K, including creating a new application and configuring environment variables for authentication callbacks and logout URLs.
• 🔑 The video covers the technical setup required for authentication, including setting up API routes in Next.js to handle login and logout processes with K.
• 🔍 It also discusses the implementation of a loading indicator to check username availability, which is a feature the presenter considers highlighting in a separate video.
• 📝 The script talks about the importance of making the signup process easy and only requiring essential information upfront, with the option to fill out smaller details later.
• 🔄 The video includes a walkthrough of the code setup for the application, including environment variable configuration and the use of the K SDK for authentication.
• 📚 The presenter mentions the possibility of creating a mini-course based on the application, indicating an interest in expanding on the content covered in the video.
• 🔗 The video concludes with an invitation for viewers to subscribe to the presenter's newsletter for updates on the mini-course and other content.

Q & A

What is the purpose of the 'Potl Pal' application mentioned in the script?

The 'Potl Pal' application is designed to facilitate user sign-ups and manage events where users can add their names and request others to bring items. It emphasizes creating a full profile post sign-up to ensure smooth event management.

How does the sign-in process work in the 'Potl Pal' application?

The sign-in process involves using an email to receive a confirmation code, which the user then enters to be redirected back to the application. This initiates the profile completion stage, which is essential for further interaction within the app.

Why is gating access to certain pages until the user completes their profile important in the 'Potl Pal' application?

Gating access ensures that users add essential information like their name and username, which is crucial for adding people to events or requesting items. This process streamlines the user experience and functionality within the app.

What is the role of the loading indicator feature in the 'Potl Pal' application?

The loading indicator is a neat feature that checks the availability of a username. It provides real-time feedback to the user during the profile creation process, enhancing the user interface and experience.

How is user authentication handled in the 'Potl Pal' application?

User authentication is managed through a combination of Next.js 14 with the App Router and K for authentication. K is used to handle login and logout processes, and it integrates with Next.js to manage user sessions effectively.

What is the significance of using Zeta as a database for the 'Potl Pal' application?

Zeta is used as a database to store user profiles separately from the authentication data managed by K. It allows for the storage of additional user information, such as names and usernames, which are essential for the app's functionality.

How does the 'Potl Pal' application ensure that users complete their profiles before accessing other features?

The application uses a redirect mechanism that sends users back to the profile completion page if they attempt to access features like 'My Events' or 'Create an Event' without having completed their profiles.

What is the role of the 'useKindBrowserClient' hook in the 'Potl Pal' application?

The 'useKindBrowserClient' hook is used to access the user object and loading state from the K authentication client. It helps in determining whether a user is logged in and provides the necessary user information for the application.

How does the 'Potl Pal' application manage the sign-up process to make it as easy as possible?

The application simplifies the sign-up process by initially requiring only an email for sign-up. It then focuses on collecting additional necessary information like name and username post sign-up to complete the user profile.

What are the considerations for storing additional user properties in the 'Potl Pal' application?

The application considers whether to store additional user properties within K or in a separate database like Zeta. The decision is based on convenience, control, and how the data will be accessed in relation to other application data.

How does the 'Potl Pal' application handle the creation of user profiles in Zeta?

The application uses the Zeta TypeScript SDK to interact with the Zeta database. It creates a user profile table and stores user information such as the user ID, username, and actual name, ensuring each profile is unique and associated with the correct user.

Outlines

00:00

📝 User Onboarding and Profile Completion in Potl Pal App

The video script discusses the user onboarding process for a sign-up application, using 'Potl Pal' as an example. It explains the importance of obtaining additional user information post-registration to create a full profile. The speaker details the process of signing in with an email and receiving a confirmation code, which then redirects the user to complete their profile by adding a name and username, essential for event participation. The script also mentions gating pages to ensure profile completion before allowing access to other features like 'My Events' or 'Create an Event'. A unique feature to check username availability is highlighted, and the use of Next.js with the app router, K for authentication, and Zeta for the database is outlined, emphasizing the complexity of creating a multi-step form.

05:00

🔧 Setting Up Authentication with K and Environment Variables

This paragraph delves into the technical setup for authentication using K, a sponsor of the video. It covers creating a new application in K, setting up callback and logout URLs, and configuring environment variables within the project. The process of setting up a dynamic route for handling different API endpoints like login and logout is explained. The paragraph also touches on the use of the K OSS Next.js package for integrating authentication into the Next.js application, including the necessary steps to ensure K can redirect successfully and the importance of updating URLs once the application is deployed.

10:02

📱 Integrating K Authentication Components and User Checks

The script continues with the implementation of K authentication components, such as the login and logout links, and a hook for accessing the user state and loading status. It describes the process of importing these components from the K OSS Next.js package and using them within the application's navbar. The importance of only displaying certain navbar links to logged-in users is emphasized, and the script provides a walkthrough of checking if a user is logged in and not loading, showing the sign-in link accordingly. It also mentions the possibility of expanding on the sign-in process with additional videos.

15:02

🗂️ Storing User Profiles in Zeta Database and Redirection Logic

The paragraph explains the decision to store user profiles in a Zeta database, separate from the K authentication process. It details the creation of a new database and a user profile table within Zeta, with unique fields for user ID, username, and actual name. The script outlines the process of setting up the Zeta client in the application, including logging in, selecting the project, and generating the necessary API key and database references. It also discusses the logic for checking if a user profile exists and the redirection to the 'Create Profile' page if it does not, as well as the use of typescript for better code inference and safety.

20:03

🛠️ Implementing Redirection for Incomplete User Profiles

This section focuses on the implementation of redirection logic to ensure that users are directed to create their profiles if they haven't done so already. It describes the process of checking for a user profile upon accessing the dashboard and other related pages, and the use of Next.js' redirect function for this purpose. The script also explains the logic for checking the existence of a user profile before allowing access to the 'Create Profile' page, to prevent users from accessing it if they already have a profile. The importance of placing these checks within a layout component in Next.js to streamline the process across multiple pages is highlighted.

25:05

🎓 Conclusion and Future Learning Opportunities

The final paragraph wraps up the video script by summarizing the onboarding workflow process discussed using Next.js 14 and other associated technologies. It hints at the possibility of turning the content into a mini-course and invites viewers to subscribe to the creator's newsletter for updates. The script concludes by expressing hope that the video was informative and bids farewell to the viewers until the next video.

Keywords

💡Onboarding

Onboarding refers to the process of integrating new users into an application, ensuring they have a clear understanding of how to use it. In the video, onboarding is crucial for the 'Potl Pal' application, as it guides new users to complete their profile with essential information like name and username, which are required for participating in events.

💡Profile Completion

Profile Completion is the act of filling out all necessary information in a user's profile. In the context of the video, it is a gating mechanism to ensure that users add a name and a username before they can access other parts of the application, like creating or joining events.

💡Next.js

Next.js is a JavaScript framework for building user interfaces. The video discusses using Next.js 14 with the app router for handling the routing and navigation of the 'Potl Pal' application, including the redirection after login and profile completion.

💡Authentication

Authentication is the process of verifying the identity of a user. The video script mentions using K (an authentication service) for managing user sign-in and sign-out processes, which is essential for securing the application and ensuring that only authenticated users can access certain features.

💡Database

A database is a structured collection of data. In the video, Zeta is used as the database to store user profiles, separate from the authentication data stored in K. The script describes how user profile information is saved in Zeta after being entered in the application.

💡Environment Variables

Environment variables are used to set configuration settings for an application. The script explains how to set environment variables for the K authentication service, including client ID, client secret, issuer URL, and redirect URLs, which are essential for the authentication process.

💡User Experience (UX)

User Experience (UX) refers to how a person feels when interacting with a system. The video focuses on improving the UX by creating a smooth onboarding process, using features like loading indicators and multi-step forms to enhance the user's journey through the application.

💡Multi-Step Form

A multi-step form is a form that is divided into multiple screens or steps. The video script discusses the complexity of creating a multi-step form for event creation in the 'Potl Pal' application, which is part of the user's journey after completing their profile.

💡Redirection

Redirection is the process of sending a user from one URL to another. The video script mentions several instances of redirection, such as after a user logs in or attempts to access a page before completing their profile, to ensure a seamless user flow.

💡Server Components

Server Components in Next.js are a way to render components on the server, which can improve performance and SEO. The script refers to the use of server components in Next.js 14 for handling data fetching and rendering, which is part of the application's architecture.

💡TypeScript

TypeScript is a programming language that is a superset of JavaScript, adding static types for better code reliability. The video script mentions using TypeScript for the Zeta database SDK, which helps in generating types for the database operations and improves the development experience.

Highlights

Creating a user onboarding process for 'Potl Pal' application to ensure users complete their profile after sign-up.

Utilizing email confirmation codes for initial user sign-in to the application.

Gating access to other pages until users add essential information such as name and username.

Implementing a loading indicator to check username availability in real-time.

Using Next.js 14 with the App Router for front-end development.

Incorporating K for authentication, which is also the sponsor of the video.

Storing user profile data in Zeta, a separate database from the authentication provider.

Discussing the importance of separating user login information from additional profile data.

Creating dynamic API routes in Next.js for handling authentication endpoints.

Demonstrating the setup of environment variables for authentication with K.

Integrating the K authentication SDK with Next.js for seamless user login and logout.

Using the useKindBrowserClient hook to access user data and loading state.

Designing a multi-step form for event creation with user profile completion as a prerequisite.

Exploring the debate on the best practices for user onboarding and profile completion.

Implementing conditional rendering in the navbar based on user authentication state.

Creating a seamless user experience by redirecting users appropriately post-login.

Considering the use of social providers for authentication alongside email-based methods.

Using Zeta's TypeScript SDK for database interactions and leveraging its auto-generated types.

Discussing the use of layouts in Next.js to manage access control across multiple pages.

Providing insights on user data requirements and the importance of not overburdening new users with optional information.

Considering the creation of a mini-course to guide users through building the application from the video.

Transcripts

often times when we have user sign up

for application there's actually more

information that we want from them after

sign up to create a full profile for

example so this is an example I've been

working on called potl pal with a few of

my partners Technologies and you go

through the process to sign in and I can

use my email and it will send me a

confirmation code that I can enter in

here this will redirect me back to the

application and at this point I want the

user to complete their profile so I

actually gate the rest of these pages to

make sure that they finish adding a name

and a username because this is going to

be essential for how we add people to an

event or request that people bring

things in this example so you can tell

if I go to the my events tab this is

going to redirect back to the profile

tab if I go to create an event it

redirects back here as well so we want

to make sure that users have their

profile created before we allow them to

get through now inside of here I also

have a neat little feature that I might

do a separate video on kind of this

loading indicator to choose whether or

not a um a username is available that I

think is pretty cool so after we create

this profile what this will do is save

this in the database and then we'd be

able to come over to the form for

creating an event as well so I'll

probably have a few additional videos on

how to create this multi-step form which

I found to be very complicated to be

quite honest uh but I want to focus on

the user profile and onboarding

experience so basically the idea of

letting a user sign up but then also

gating Pages until they finish the

necessary information that you want now

you'll find some mixed reviews on how

exactly this should work typically what

people agree on on is you should make

the sign up process as easy as possible

and then you should let some of the

smaller details get figured out later if

they're not necessary in this case since

we need to have those profile pieces of

information the name and the username

we're going to make those required but

we'll let the signup process happen with

just email using kind and then take over

the user profile information associated

with that user after that so what we're

going to use is next js14 with the app

router I've actually got a demo project

set up that I'll show you in a second

and then we're going to use K for

authentication K is actually the sponsor

of this video so the first time working

with K but it's worked really well as

we'd expect inside of nextjs you'll see

that in a second and then uh Zeta for a

database to actually store the user

profile and we'll talk about why that's

separate from the actual user in kind in

a minute so let's take a look at the

starter code that I have or actually

probably be easier to uh just show you

this running so this is running at Local

Host 3001 and I basically have a copy of

the front end uh design which I think

these cards are pretty cool and then

what we're going to do is come in and

add the signin functionality and then

we're going to add all the other

functionality for the user profile and

then we'll actually save that

information into our database so the

first thing we'll want to do is go into

kind and you can log in for a free

account so I'll go ahead and log in with

my GitHub account and after you've

logged in you'll be taken to your

dashboard you can see I basically have

one application here which is what I've

been working on with potl pal so I'm

going to add a completely brand new

application and we'll call this user

profile demo this will be considered a

backend web application so we'll go

ahead and create that and then inside of

here we're going to create a nextjs um

project so it's interesting that this is

referenced as backend uh interesting

because nextjs can do front end and

backend and actually doing

authentication on the front end and the

backend is actually a pretty tricky

topic but I'm going to choose nextjs in

here and then we'll uh save this and

this will give us a couple of different

uh properties that we can use

you should actually just press set on

both of those variables but we'll come

back and fix that in a minute so I'm

going to copy the Callback URL and the

logout URL basically where do we want to

send the user uh with the call back

after they logged in and then where do

we want to send the user after they've

logged out they have a starter kit we're

going to start from scratch here which

is okay uh and then I'm just going to

copy all of these uh into my environment

variable file so a couple of things that

it has has the client ID which is the

the ID for the specific application that

we're creating has a client secret uh

hidden and a copi that's nice then it

has the issuer URL which is basically

the domain on con that we redirect to to

actually handle the login process have

our site URL and then we have where do

we want the user to go after log out and

after login so we can copy this entire

thing and we can create a new file

inside of the

root called EnV and we'll just paste all

these credentials in so it's nice that

they just give all these to us and then

I'm going to go to the next xjs docs so

that was basically the docs if you're

starting with their uh with their

starter code in this case we're starting

from scratch basically so let's go ahead

and we will install this package so the

kind OSS kind off

nextjs and then we'll need to copy in

this URL to uh to be a known URL that

they can redirect back to uh from con so

we're going to put that in the Callback

URLs and then we're going to put the

Local Host 3000 in for the logout

redirect URL now obviously these are

URLs that you're going to need to update

when you actually have a deployed

application but inside of your project

details just make sure that you save

that so KH can actually redirect

successfully then we have our

environment variables we already did

this um so we have the client ID the

secret the issuer URL the site URL and

then the two redirect URLs so we should

have all the information copied uh the

kind audience is not required this is if

you're wanting to um confirm JWT or

access tokens that they

uh coming to the intended audience which

in this case we're not getting into so

we add all those credentials and then

basically we have like two lines to set

up off and this is actually really neat

so inside of app we're going to create

uh API SLO so inside of the app

directory so app and then we'll have a

new folder and we'll do API

SLO and

then this route name here actually could

have copied this whole thing that's okay

and inside of here we create a new file

and we'll do a dynamic route uh with

kind off in there and basically what

this is going to do is allow uh kind

that should be a typescript file as well

is allow kind to handle multiple

different API endpoints basically for

login log out Etc which is pretty handy

and then we will uh import the handle

off from their package then we'll just

export handle off and this is all it

takes to basically have authentication

set up inside of nextjs where we have

environment variables and then this is

all the configuration uh of the SDK so

really really not too bad now we can go

ahead and run this application just to

make sure it's running again so let's go

back to the running one I think this is

on 301 301 and this should be good to go

so nothing's changed now we can start to

get into the navbar and I already have

some codes stubbed out here it's

basically just design it has the uh

image in here it also has state for user

and loading which we aren't really

tracking yet now if you wanted to follow

along with this source code you can

actually check out the source code for

the original project in here so I will

make sure to push all this code all the

original code for the poock pal demo so

you can have this as a reference if you

want to and I'll include a link in the

description below but let's start with

actually getting a reference to some

components that we can use for login and

log out all right so then we're going to

import a few different things from this

kind package now specifically we're

going to import the login link the

logout link and those are probably

pretty self-explanatory and then also a

use hook that we can use on the front

end specifically to gain access to the

user itself so we can actually get the

user from that hook and a loading state

to see whether or not we're loading

determining whether or not we have a

user so we're going to import all of

these things and this is going to uh

come from the

kind kind OSS nextjs package and inside

of here we're going to get the login

link the log out link see we're getting

good intelligence there and then the use

kind browser CL

now this is a little bit wordy but I

actually like that they name this

because nextjs authentication can be

really tricky considering you can do

things on the front end and the back end

so inside of here instead of hardcoding

these two properties user and is loading

we can actually get these directly from

this client so this hook use con browser

client we can grab those two properties

and actually reference them there so we

can get rid of these hardcoded values

and then we can reference them down

below now the other thing we're going to

do is uncomment the log out link again

this is just log out link component that

we put the text log out in nothing

really we have to do there I have that

wrapped in An Li so that it can be

styled the way I want and the last thing

is we'll uncomment this section which is

basically a check to say hey if we don't

have a user and we're not loading so we

fully confirmed the user is not logged

in show the sign in link or login link

so you can call that whatever you want

so again these two components are given

to us we don't have to do anything for

them other than in this case I WRA them

with an Li so I could style them the way

I want the last thing just to mention to

make sure is the uh routes or the navbar

links that are for a logged in user are

only shown if we actually have a user

and we're finished loading so let's say

that let's just see what we have now I

just restarted this application to make

sure that this current version is

running on Local Host 3000 I had the

original version on 3000 but then my

callback URLs and things were Local Host

3000 so now I'm making sure the one that

I'm working on is the one that I'm

running and it is at Local Host 3000 so

let's go and now just refresh Local Host

3000 so we can get the current page and

we should see there was a little bit of

delay as it's loading to check the state

of the logged in user you see there's no

logged in user so now we see the sign in

button so now we can go through and sign

in and it says we don't have a way to

authenticate you at the moment and this

is because inside of our project we

actually need to configure what type of

authentication we're going to allow so

in this case you can choose password

list where they send you a code to your

email or a password and I'm going to

choose to do passwordless and it's worth

noting that you can also add

authentication for social providers as

well so this is done at the tenant level

so if you go back to your tenant and

then go into settings you can come into

authentication and then here you can see

where you have your social connections

and Enterprise connections that you can

enable if you scroll through you'll see

a bunch that you recognize Discord and

Facebook GitHub Etc so just wanted to

call out that there's other options that

you can use for your login experience as

well so by the time we come back to our

local host and and then we click the

sign in we should now be redirected to a

page where we can actually go through

this login process and I'll go through

the same thing you saw at the beginning

of the video while I'll grab this token

out of my email put it in here it will

redirect us back to the application now

if you remember back to our onboarding

and the environment variables that we

copied in there was a post login

redirect URL and this is set to/

dashboard which is why after we log in

it redirects us back to the actual

dashboard route all right so I've got

that code I'll push continue and it

should Now take us back to the

application in this case it's

redirecting back to the dashboard page

where we don't really have anything

there yet so you can see that we have

access to the dashboard we have no

events yet then we also have access to

the create an event tab but this is

where we want to stop the user from

getting to this place if they haven't

actually completed their onboarding

profile meaning their name and their

username so in this case we want to be

able to store this user profile inside

of a Zeta database this is what we're

going to use for database another

partner of mine that I've worked a ton

with you can see bunch of different

Demos in here so this is completely free

you can set up it run runs postrest

underneath the hood I'll have more

content actually on using this with

Prisma in the future but for now we're

going to use the Zeta typescript SDK so

what we'll do is create a new database

and we'll call this user profile demo

and in this case I won't enable the

direct postest although it's something

that I would recommend doing and using

this with Prisma it's pretty exciting

actually that we can do this I just

haven't updated this demo for that yet

uh so inside of here we just want to

have one table basically and we're going

to have the user profile table now

there's kind of an open question of if

you want to store additional properties

of a user where would you store those

and so like other providers you actually

have the ability to store like custom

properties inside of kind as well but in

this case we're going to store them in

our own database and my thought is this

is going to be slightly more convenient

and wrapped around or accessed in a

similar way that we will get all of our

other data so kind will be the source of

Truth for all of our uh user login

information specifically storing

passwords Keys tokens Etc and then we'll

store additional information inside of

our own database so we have complete

control over this now the way we're

going to do this though though is we're

going to have the ID of the user profile

match up with the ID of the user from

kind that way when we get a user ID from

the user in kind we can use that as a

reference to pull in the user profile

from Zeta actually I slightly misspoke

we'll have the ID in here be

autogenerated by Zeta and then we'll

reference the user ID and that's what

we're actually going to query by so

we'll have the user ID property is a

string and it will be unique so we'll

make sure we'll only have one profile

per user so we'll have the uh user user

ID that we can do our associations with

we'll also have the user name these will

also be unique and then lastly we'll

have the actual name of the user so

we'll put that in there as well all

right so that's all the set up in the

database that we actually need now we

need to actually reference this inside

of our code so to do this we'll need to

install The Zeta client so let's just

take a look at the Zeta client so this

is Zeta for typescript and JavaScript

you can go to the details here on their

documentation page and what we'll need

to do is actually install that client

but we'll also need to connect Zeta to

our uh to our application so what we'll

do is you would run a Zeta login for the

first time you're uh doing this and

it'll set up a token behind the scenes

Etc I've already done that so I can just

run Zeta a nit and then it's going to

ask us basically which project do we

want to attach this to and I want to

attach this to the user profile demo and

then we can add uh the Dov to the dog

ignore it's going to ask us what sort of

code do you want it to return in this

case we say typescript where do we want

that to go we can put it by default in

source

z.s and then what's really cool is this

will will uh give us our API key so you

can see reference in here it created the

API key in ourv file and then also

referenced a Zeta Branch as main so you

can have multiple branches in Zeta to

separate your uh database tables based

on like branches or like GitHub branches

or environments or whatever you want to

do there the other thing that it

generated is the

zeta.phi data and then it uses some

typescript inference to actually

generate types for us that we can use

and then lastly has a reference to the

actual actual database itself so this is

all pretty cool all set up for us and

now we have a fully typed uh typescript

SDK that we can use to interact with all

of our data so the first thing we want

to do is go into our dashboard page and

notice we're not really doing anything

inside of here so let's actually do the

first level of a check the first check

is just to see if we have a logged in

user so we know we don't want the user

to be able to log or to access the

dashboard if they're not already logged

in so we can import the or get the G

user function from and then we have a

function get kind server session my Auto

Import for this is a little bit off so

this is not going to come from disc it's

going to come from the server so there's

the import for this function this needs

to be inside of an async function so we

can await this now these can be async

because we're using react server

components by default in next js14

and so we get this get user function and

then we can call this to actually get

the user so we can uh say the user is

going to come from awaiting the call to

the get user function now lastly we know

if we don't have a user we we don't want

them to access the dashboard so if we

don't have a user we can then just run a

redirect so we can get a redirect from

next navigation I believe and we will uh

just redirect them to the homepage we

could redirect them to signin or

something else in this case we'll just

start with the homepage and just kind of

kick them

out so we can run our application again

and just see if this is running now

again the next step is to make sure they

have a profile which add some additional

logic but for now this should just uh

navigate the user away if they're not

actually logged in so if we go back to

uh my events is the SL dasboard page and

just to show you this we can go to uh SL

dashboard so there's the route for

dashboard we're able to get here if we

were to log out what we want to check is

if we try to manually go to the

dashboard route it should just go there

and then redirect the user back so we're

successfully checking to make sure that

a user has to be logged in to actually

get to their

dashboard now I'm going to go through

that signin process again so we can

continue to test our signed in user

workflow all right so I'm back and

signed in now the next thing we want to

do is actually check to see if the there

is a user profile associated with this

user so this is where we're going to

start to integrate with Zeta and what

we're going to do is we're going to get

a reference to The Zeta client so this

is going to come from the git Zeta

client function so that thing is going

to be imported from that Zeta TS file

that was just generated for us and

that's going to give us access to the

Zeta client that we can make queries

with and then what we'll do is we will

await our client. DB do and then notice

in here it gives us intellisense for the

tables that we can work with which is

pretty neat and then we can call a

filter and what do we want to filter by

we want to filter by the user ID

property where it match matches the user

ID of the logged in user so we can get a

reference to that ID by destructuring it

or just getting it from the user so from

the logged in user in kind we want to

grab its unique identifier and we're

going to use that as our filter to look

inside of our Zeta

database now from here after the filter

we just want to get the first so there

should only be one of these we just want

to get the first of them and we can uh

Alias this in typescript to a user

profile

record and again this is coming from

that Zeta code that was generated for us

the user profile record here which has

all the properties of the user that we

tracked and we can see this inside of

here so all of these properties it also

has a combination of a Zeta record which

Zeta has created at updated at Etc so

this is going to give us all the

information for that user profile that

we would want so in here we'll just uh

see uh and call this user profile

and then additionally now is where we

actually want to check if this user

profile doesn't exist we can do the same

thing and actually redirect this user

away but in this case we specifically

want to redirect the user not to the

homepage but to the create profile page

and you can see that we have a route for

this already created which is the create

profile page now inside of here there's

a lot of work already done inside of the

create profile form so I actually skip

over this if you want to see this more

in depth uh I can do a separate video on

this but I don't think it's the most

necessary part of this part but

basically what we have is a relatively

simple form in here that has a spot for

name and then for username now the thing

the couple things that get a little

complicated is being able to do the

check with the username so checking the

availability and using some debouncing

to make sure we're not making too many

API requests to the back end to check

the availability of that username while

it's actually being typed all right so

the majority of that code is handled for

us now what we want to do is is just

look inside of the code that we were

working on and just check if we don't

have a user profile then we actually

want to do our redirect so we can use

the same redirect function that we used

before and then we'll redirect to the

create

profile page now we'll actually move

this code a little bit here in a second

and we'll see why we can take advantages

advantage of layouts in nextjs versus

just pages but for now let's just see if

this works so if we come back to the

application and refresh on our dashboard

page we should see that we get

redirected to the create your profile

page and again this has the information

already ready to handle the loading

State and the checking for the username

now the way this is working for the

username is it's just doing a query

inside of this user profile table with

Zeta to see if that username already

exists inside of the database now again

it also does some debouncing to make

sure it's not sending a request every

time something changes on the input it

has a delay I think of 500 milliseconds

we can actually see the delay inside of

here if we go and look so we have a

debounced username input Handler and it

takes a debounce of 500 milliseconds and

you can obviously configure this to be

whatever you want again let me know if

you want a full video on how to do like

a live uh feedback username Checker but

for now we'll just take advantage of the

fact that this is done for us so inside

of this uh dashboard page if there is no

user profile we want to redirect to the

actual create profile profile page now

the one additional thing we could do

inside of this page is check to see

whether or not this profile does Exist

by the time we get here so what if

someone manually tries to go to the

create profile page well we don't want

that to happen either so we can actually

kind of copy the same exact thing that

we just did and in the final code I have

this in a separate function but we could

copy this exact same code and tweak it

just a little bit so we can get all of

our Imports we want the Zeta client uh

in Zeta and we want the user profile

record from Zeta as well and we'll say

almost the opposite of these we'll get

the user from kind and then we'll just

leave this and say redirect away if

there is no user from there we'll query

for the user profile and then now we'll

say if there is a user profile then

we'll redirect back to the dashboard

page which is SL dashboard so in this

case if they already have a profile they

don't need to be on the create profile

page we'll just redirect them back to

the dashboard page and again this only

only gets triggered if they try to

manually type in SLC create-- profile

after being logged after already

creating their profile so we're H we

have this check on the dashboard page

but we also want to apply this to the

new event so right now this is a

multi-step form and so step one is that

new event SL step one so if you wanted

to check on each one of the three steps

that the user does have a profile we'd

have to copy that into three additional

pages with the exact same code

thankfully though we have access to

under dashboard we have a layout and

inside of the layout component we can

already add our check to make sure there

is a user and redirect them if there is

not one that means if they try to go to

any page inside of Slash dasboard either

SL dasboard or SL dashboard slne event

SL step-1 Etc it will handle that

redirect from here we can just replicate

or actually just move this profile code

over into the layout and it'll take care

of all of those checks for us so again

we'll update all of our imports from

Zeta here to get our client and our

profile record and now at the layout

level before we even let them get to any

of the children routes we check the user

profile to make sure it exists and if

not redirect them to the create profile

so this means if I try to go to

dashboard it should redirect if I try to

go to slash dashboard SL new event it

will redirect and then if I try to go to

any of those in individual step so I

could go to SL dasboard Slash new event

SL step-1 and that's should redirect and

I can do that for step two and three as

well so this is how you can protect

individual pages from a user that has

not completed their onboarding profile

now would recommend thinking through

what are the things inside of here that

are actually required in my case to be

able to create an event and to

participate in events you have to have a

name and a username which makes both of

these required before they can go to any

of those other pages but you may have

additional things like preferences that

are not required for the user but would

be useful to have so in that case I

would end up creating a SL preferences

or SL profile page where the user can go

and update any of their preferences as

they need to so they're not bogged down

so they're not slowed down from actually

using the application because they

haven't filled out information that's

not even necessary for them to

participate so always think about what

pieces of data are actually required for

the user and what pieces of data could

you let them take care of kind of

whenever they're ready or never if they

don't need to

so there's a lot to think about in a

nextjs world on the client on the server

using server components server actions

Etc hopefully this gives you a better

idea of how to handle an onboarding

workflow for your users using NEX js14

and all the other things that come along

with it if you're interested in learning

how to build this entire application I'm

thinking about turning this into a mini

course so if you want to follow along

you can follow my newsletter at jamesc

quick.com and then scroll down to the

footer to subscribe and get updates on

weekly basis in the meantime I hope you

enjoyed the video and I'll catch you

next time