Next.js Protected Routes: Require User Profiles with Kinde (EASY!)
Summary
TLDRThis 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
📝 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.
🔧 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.
📱 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.
🗂️ 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.
🛠️ 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.
🎓 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.
Mindmap
Keywords
💡Onboarding
💡Profile Completion
💡Next.js
💡Authentication
💡Database
💡Environment Variables
💡User Experience (UX)
💡Multi-Step Form
💡Redirection
💡Server Components
💡TypeScript
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
تصفح المزيد من مقاطع الفيديو ذات الصلة
Secure Your Microservices with Keycloak | OAuth2 & JWT | Spring Cloud Gateway
Auth Page Logic | To Do App | FlutterFlow for Beginners
Manage Customers Profile using Interactive Grid and Input Form - Part 5
#36 Spring Security Project Setup for JWT
Angular Login and Signup Page | Local-Storage | angular tutorial | angular tutorial for beginners
Syncthing - The Based Way to Sync Your Files
5.0 / 5 (0 votes)