Auth0 is Authentication-as-a-Service used to manage the front door to your application. It provides drop-in user auth solutions that look great on any frontend app, and integrate with any backend server. Try it 👉 https://bit.ly/3peoMQ4

Thanks to @JamesQQuick  for going beyond 100 seconds! Subscribe to his awesome channel. 

Disclaimer. This video contains a paid endorsement and was produced in collaboration with Auth0. I trust their product and have used it as a customer for many years . 

#dev #code #100SecondsOfCode
2024-02-04T13:54:46.602Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
a3eb9434-f1de-4ce2-8a87-2498b22cb8bc
c19887fa54a48175e8a230b23a34a5706f1cc6a03340b69cd5e536996a02afc2
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Auth0, a user authentication and authorization platform that serves as the front door to your application.
Before someone can start using your app securely, they need to prove their identity.
Historically, the most common method is email password authentication.
As a developer, this requires you to create an interface on the front end to collect the password, then pass it off to a server and database to store it on the back end for future use.
Your front end interface needs to look good, while your back end code needs to be secure and reliable.
Auth0 is a universal solution that handles all of these concerns for view, it provides a polished login experience that you can drop into any web or mobile app while also providing the infrastructure to store that data securely.
Think of it like a universal translator that sits in between your front end, back end, and other third party tools to manage the identity of your users.
But modern applications tend to require user authentication methods that are far more complex than email password login.
Users may want to log in with a social provider, like Apple or Google, using the OpenID Connect standard.
Or you may require multi factor authentication to send a text message to the user before unlocking the door.
Or you may want to take things even further to validate biometrics like a fingerprint scan.
Auth0 supports all of these authentication methods out of the box and allows you to customize the flow with a click of a After sign up, each user is assigned a unique ID, and the record can be managed from the dashboard.
You might view their login history or devices, or maybe you want to block a malicious user.
You can also define custom authorization logic in the form of roles and permissions.
You can then read this data from a front end or back end environment with an SDK for virtually every run time and a rest API for everything else.
This has been Auth 0 in 100 seconds, but stay tuned because I've invited a friend of mine, in James q Quick to take us beyond 100 seconds to integrate Auth 0 in a Next JS app.
He's a developer advocate at Auth 0 and also has an awesome YouTube channel that you should definitely subscribed to.
Hi, everyone.
My name is James, and I'm here to take you beyond 100 seconds in your journey to learning more about Auth 0.
So So let's go ahead and see how to set up Auth0 inside of a Next.
Js application in less than 10 minutes.
Alright.
So the first thing you'll want to do is sign up for a free account in Auth0.
0 you'll have a link that you can sign up with in the description below so I'm going to go ahead and log in and then we'll get started creating our application.
Alright.
Now that I'm logged in to Auth0, I'm here on the Auth0 dashboard.
Now Auth0 has what are called tenants and you'll need to Create a tenant to get started.
A tenant is basically a grouping of your applications.
So in this case I'm inside of my James Kukwik demos tenant.
From there I can go into applications and I can create a new application.
Now when we try to create a new application we're gonna have a couple of different types.
What we're gonna choose is a regular web application.
What this means is we're able to take advantage of the server side aspect of Next.
Js.
And so in this case, we'll create a regular web application.
So I'll call this my Next JS app.
And then after this is created under the quick start, there is some starter code that we can use for a bunch of different platforms.
So if you're not familiar with React and Next JS, You can check out all the different platforms and frameworks that we have available to you to get started.
But I'm gonna choose Next.
Js and I'm gonna download the Sample project and it says there's a couple of different settings that we'll need to update inside of, uh, the Aussieer dashboard as we go through this.
So let's go ahead and down Load this repository.
With that downloaded, let's go back into our settings and I'll show you a couple of things we need to pay attention to.
When we open that source code, we'll need to know our Our domain and our client ID.
The domain is our tenant and then dot and then our geography here in us.all at.com, and then the client ID is a unique identifier for this application.
So one thing we need to do is scroll on down and update our callback URLs and what this is is the acceptable URLs that all 0 can call back to after authentication happens so we redirect the user to boss 0 they authenticate and they redirect the user back to this URL now this is going to be an API endpoint inside of our Next.
Js application And then for our allow allowed logout URLs, we'll just have local host 3,000.
So I'm gonna scroll all the way to the bottom, make sure to save these settings, And then I'm gonna open up this sample code, the starter code inside of Versus Code.
Okay.
I've got that sample code downloaded and opened inside of Versus Code.
So the first thing I'm gonna do is run the npm install command, which will go and install all of our necessary packages.
Now as that is Stalling, notice we have a dotenv dot local file and inside of this file we have configured a secret here where we need to I'll replace this with some sort of random secret which is used to sign cookies.
We could more intelligently create this but for now we can just add in a random string.
Then we have our base URL, which is the local host 3,000, the issuer base URL, which is that domain that we just looked at, The client ID which is already populated in here and then also the client secret.
Now because this has a server side aspect in Next.
Js, we're able to keep a secret.
In this case, we can keep this client secret safely inside of our project.
Alright.
With all of that in place, I'm gonna run the npm run dev command and this will start up our dev server and so after it is up and running we can open a new tab to localhost3000 And once this opens up notice we'll have this login button here where we can go ahead and log in.
This will do the redirect over to Auth0.
I've got a Twitter option configured here, but by default you'll have sign in with Google available to you and then you'll have the ability to log in with email and password.
So if this is your first time you'll have to go through the sign up section for your email and password or you can choose the Google provider.
In this case I'm gonna log in with my email and password.
Alright.
After I finish that login process, notice I've got my profile picture up here.
And then if I go to the profile page, I can see a little bit of information about myself as a user.
So you might be wondering how much code did it take to implement all this?
Well, I wanna show you how cool and easy it is to set up Auth0 inside of a Next.
Js application.
First of all inside of our package.
Json file you will see that we have the Auth0 Next JS Auth0 package installed and then inside of our pages directory and then API and auth, You'll see we have a dynamic route here that exports this handle auth.
Basically this is all the configuration we need for the SDK itself to generate API endpoints Or login, logout, callback, and a me or a profile information route.
So all of that stuff is configured for us.
From there, we can look inside of our components directory and inside of our navbar notice there's a use user hook here.
This is configured inside of the underscore app.
Js where we wrap our entire app with the user provider also provided by the SDK.
And then we can access information about the user.
We can determine whether or not they're logged in or if we're currently loading the user state and then show different things Based on that, so you can see here inside of our JSX, we're conditionally rendering a couple of different Nav items based on if the user is logged in or not.
Now if you're interested in a little bit more about what this SDK can do inside of Next.
You can check out the GitHub repository for all the details.
A couple of things I wanna call out are these higher order functions with API auth required and with page auth required.
If you use these, you can protect your pages and your APIs against unauthenticated users.
This is one of the quickest and easy ways easiest ways I've seen in Next.
Js to be able to protect your API endpoints and your pages so it works really really well.
So here's a few other things you can do with Auth0.
You can set up multi factor authentication with text messages and emails and even device biometrics using something like your fingerprint.
AllcERA can also help you handle roles and permissions so that you can add role based access control to your applications.
Another really cool feature that we have inside of all 0 something called actions where you can customize, right, custom logic during the authentication flow.
If you need to save a record to your own database or if you need to notify a user or something, you can add that custom code right inside of the Auth0 dashboard.
Lastly, there are SDKs for a lot of different languages and frameworks that you might be interested in using like the one we saw here in Next.
Js.
Alright so that was a little bit more about Allcros specifically in the context of a Next.
Js app.
I hope you enjoyed it.

Speaker 0: Auth0, a user authentication and authorization platform that serves as the front door to your application. Before someone can start using your app securely, they need to prove their identity. Historically, the most common method is email password authentication. As a developer, this requires you to create an interface on the front end to collect the password, then pass it off to a server and database to store it on the back end for future use. Your front end interface needs to look good, while your back end code needs to be secure and reliable.

Auth0 is a universal solution that handles all of these concerns for view, it provides a polished login experience that you can drop into any web or mobile app while also providing the infrastructure to store that data securely. Think of it like a universal translator that sits in between your front end, back end, and other third party tools to manage the identity of your users. But modern applications tend to require user authentication methods that are far more complex than email password login. Users may want to log in with a social provider, like Apple or Google, using the OpenID Connect standard. Or you may require multi factor authentication to send a text message to the user before unlocking the door.

Or you may want to take things even further to validate biometrics like a fingerprint scan. Auth0 supports all of these authentication methods out of the box and allows you to customize the flow with a click of a After sign up, each user is assigned a unique ID, and the record can be managed from the dashboard. You might view their login history or devices, or maybe you want to block a malicious user. You can also define custom authorization logic in the form of roles and permissions. You can then read this data from a front end or back end environment with an SDK for virtually every run time and a rest API for everything else.

This has been Auth 0 in 100 seconds, but stay tuned because I've invited a friend of mine, in James q Quick to take us beyond 100 seconds to integrate Auth 0 in a Next JS app. He's a developer advocate at Auth 0 and also has an awesome YouTube channel that you should definitely subscribed to.

Speaker 1: Hi, everyone. My name is James, and I'm here to take you beyond 100 seconds in your journey to learning more about Auth 0. So So let's go ahead and see how to set up Auth0 inside of a Next. Js application in less than 10 minutes. Alright.

So the first thing you'll want to do is sign up for a free account in Auth0. 0 you'll have a link that you can sign up with in the description below so I'm going to go ahead and log in and then we'll get started creating our application. Alright. Now that I'm logged in to Auth0, I'm here on the Auth0 dashboard. Now Auth0 has what are called tenants and you'll need to Create a tenant to get started.

A tenant is basically a grouping of your applications. So in this case I'm inside of my James Kukwik demos tenant. From there I can go into applications and I can create a new application. Now when we try to create a new application we're gonna have a couple of different types. What we're gonna choose is a regular web application.

What this means is we're able to take advantage of the server side aspect of Next. Js. And so in this case, we'll create a regular web application. So I'll call this my Next JS app. And then after this is created under the quick start, there is some starter code that we can use for a bunch of different platforms.

So if you're not familiar with React and Next JS, You can check out all the different platforms and frameworks that we have available to you to get started. But I'm gonna choose Next. Js and I'm gonna download the Sample project and it says there's a couple of different settings that we'll need to update inside of, uh, the Aussieer dashboard as we go through this. So let's go ahead and down Load this repository. With that downloaded, let's go back into our settings and I'll show you a couple of things we need to pay attention to.

When we open that source code, we'll need to know our Our domain and our client ID. The domain is our tenant and then dot and then our geography here in us.all at.com, and then the client ID is a unique identifier for this application. So one thing we need to do is scroll on down and update our callback URLs and what this is is the acceptable URLs that all 0 can call back to after authentication happens so we redirect the user to boss 0 they authenticate and they redirect the user back to this URL now this is going to be an API endpoint inside of our Next. Js application And then for our allow allowed logout URLs, we'll just have local host 3,000. So I'm gonna scroll all the way to the bottom, make sure to save these settings, And then I'm gonna open up this sample code, the starter code inside of Versus Code.

Okay. I've got that sample code downloaded and opened inside of Versus Code. So the first thing I'm gonna do is run the npm install command, which will go and install all of our necessary packages. Now as that is Stalling, notice we have a dotenv dot local file and inside of this file we have configured a secret here where we need to I'll replace this with some sort of random secret which is used to sign cookies. We could more intelligently create this but for now we can just add in a random string.

Then we have our base URL, which is the local host 3,000, the issuer base URL, which is that domain that we just looked at, The client ID which is already populated in here and then also the client secret. Now because this has a server side aspect in Next. Js, we're able to keep a secret. In this case, we can keep this client secret safely inside of our project. Alright.

With all of that in place, I'm gonna run the npm run dev command and this will start up our dev server and so after it is up and running we can open a new tab to localhost3000 And once this opens up notice we'll have this login button here where we can go ahead and log in. This will do the redirect over to Auth0. I've got a Twitter option configured here, but by default you'll have sign in with Google available to you and then you'll have the ability to log in with email and password. So if this is your first time you'll have to go through the sign up section for your email and password or you can choose the Google provider. In this case I'm gonna log in with my email and password.

Alright. After I finish that login process, notice I've got my profile picture up here. And then if I go to the profile page, I can see a little bit of information about myself as a user. So you might be wondering how much code did it take to implement all this? Well, I wanna show you how cool and easy it is to set up Auth0 inside of a Next.

Js application. First of all inside of our package. Json file you will see that we have the Auth0 Next JS Auth0 package installed and then inside of our pages directory and then API and auth, You'll see we have a dynamic route here that exports this handle auth. Basically this is all the configuration we need for the SDK itself to generate API endpoints Or login, logout, callback, and a me or a profile information route. So all of that stuff is configured for us.

From there, we can look inside of our components directory and inside of our navbar notice there's a use user hook here. This is configured inside of the underscore app. Js where we wrap our entire app with the user provider also provided by the SDK. And then we can access information about the user. We can determine whether or not they're logged in or if we're currently loading the user state and then show different things Based on that, so you can see here inside of our JSX, we're conditionally rendering a couple of different Nav items based on if the user is logged in or not.

Now if you're interested in a little bit more about what this SDK can do inside of Next. You can check out the GitHub repository for all the details. A couple of things I wanna call out are these higher order functions with API auth required and with page auth required. If you use these, you can protect your pages and your APIs against unauthenticated users. This is one of the quickest and easy ways easiest ways I've seen in Next.

Js to be able to protect your API endpoints and your pages so it works really really well. So here's a few other things you can do with Auth0. You can set up multi factor authentication with text messages and emails and even device biometrics using something like your fingerprint. AllcERA can also help you handle roles and permissions so that you can add role based access control to your applications. Another really cool feature that we have inside of all 0 something called actions where you can customize, right, custom logic during the authentication flow.

If you need to save a record to your own database or if you need to notify a user or something, you can add that custom code right inside of the Auth0 dashboard. Lastly, there are SDKs for a lot of different languages and frameworks that you might be interested in using like the one we saw here in Next. Js. Alright so that was a little bit more about Allcros specifically in the context of a Next. Js app.

I hope you enjoyed it.
Auth0, a user authentication and authorization platform that serves as the front door to your application. Before someone can start using your app securely, they need to prove their identity. Historically, the most common method is email password authentication. As a developer, this requires you to create an interface on the front end to collect the password, then pass it off to a server and database to store it on the back end for future use. Your front end interface needs to look good, while your back end code needs to be secure and reliable. Auth0 is a universal solution that handles all of these concerns for view, it provides a polished login experience that you can drop into any web or mobile app while also providing the infrastructure to store that data securely.
email
cryptocurrency
security
networking
Think of it like a universal translator that sits in between your front end, back end, and other third party tools to manage the identity of your users. But modern applications tend to require user authentication methods that are far more complex than email password login. Users may want to log in with a social provider, like Apple or Google, using the OpenID Connect standard.
Or you may require multi factor authentication to send a text message to the user before unlocking the door. Or you may want to take things even further to validate biometrics like a fingerprint scan. Auth0 supports all of these authentication methods out of the box and allows you to customize the flow with a click of a After sign up, each user is assigned a unique ID, and the record can be managed from the dashboard. You might view their login history or devices, or maybe you want to block a malicious user. You can also define custom authorization logic in the form of roles and permissions. You can then read this data from a front end or back end environment with an SDK for virtually every run time and a rest API for everything else.
security
cryptocurrency
This has been Auth 0 in 100 seconds, but stay tuned because I've invited a friend of mine, in James q Quick to take us beyond 100 seconds to integrate Auth 0 in a Next JS app. He's a developer advocate at Auth 0 and also has an awesome YouTube channel that you should definitely subscribed to. Hi, everyone. My name is James, and I'm here to take you beyond 100 seconds in your journey to learning more about Auth 0. So So let's go ahead and see how to set up Auth0 inside of a Next. Js application in less than 10 minutes. Alright. So the first thing you'll want to do is sign up for a free account in Auth0. 0 you'll have a link that you can sign up with in the description below so I'm going to go ahead and log in and then we'll get started creating our application. Alright. Now that I'm logged in to Auth0, I'm here on the Auth0 dashboard. Now Auth0 has what are called tenants and you'll need to Create a tenant to get started. A tenant is basically a grouping of your applications. So in this case I'm inside of my James Kukwik demos tenant. From there I can go into applications and I can create a new application. Now when we try to create a new application we're gonna have a couple of different types. What we're gonna choose is a regular web application. What this means is we're able to take advantage of the server side aspect of Next. Js. And so in this case, we'll create a regular web application. So I'll call this my Next JS app. And then after this is created under the quick start, there is some starter code that we can use for a bunch of different platforms. So if you're not familiar with React and Next JS, You can check out all the different platforms and frameworks that we have available to you to get started.
But I'm gonna choose Next. Js and I'm gonna download the Sample project and it says there's a couple of different settings that we'll need to update inside of, uh, the Aussieer dashboard as we go through this. So let's go ahead and down Load this repository. With that downloaded, let's go back into our settings and I'll show you a couple of things we need to pay attention to. When we open that source code, we'll need to know our Our domain and our client ID. The domain is our tenant and then dot and then our geography here in us.all at.com, and then the client ID is a unique identifier for this application. So one thing we need
intellectual property
software
to do is scroll on down and update our callback URLs and what this is is the acceptable URLs that all 0 can call back to after authentication happens so we redirect the user to boss 0 they authenticate and they redirect the user back to this URL now this is going to be an API endpoint inside of our Next. Js application And then for our allow allowed logout URLs, we'll just have local host 3,000. So I'm gonna scroll all the way to the bottom, make sure to save these settings, And then I'm gonna open up this sample code, the starter code inside of Versus Code. Okay. I've got that sample code downloaded and opened inside of Versus Code. So the first thing I'm gonna do is run the npm install command, which will go and install all of our necessary packages. Now as that is Stalling, notice we have a dotenv dot local file and inside of this file we have configured a secret here where we need to I'll replace this with some sort of random secret which is used to sign cookies. We could more intelligently create this but for now we can just add in a random string. Then we have our base URL, which is the local host 3,000, the issuer base URL, which is that domain that we just looked at, The client ID which is already populated in here and then also the client secret. Now because this has a server side aspect in Next. Js, we're able to keep a secret. In this case, we can keep this client secret safely inside of our project. Alright. With all of that in place, I'm gonna run the npm run dev command and this will start up our dev server and so after it is up and running we can open a new tab to localhost3000 And once this opens up notice we'll have this login button here where we can go ahead and log in.
This will do the redirect over to Auth0. I've got a Twitter option configured here, but by default you'll have sign in with Google available to you and then you'll have the ability to log in with email and password. So if this is your first time you'll have to go through the sign up section for your email and password or you can choose the Google provider.
twitter
google
email
In this case I'm gonna log in with my email and password. Alright. After I finish that login process, notice I've got my profile picture up here. And then if I go to the profile page, I can see a little bit of information about myself as a user. So you might be wondering how much code did it take to implement all this? Well, I wanna show you how cool and easy it is to set up Auth0 inside of a Next. Js application. First of all inside of our package. Json file you will see that we have the Auth0 Next JS Auth0 package installed and then inside of our pages directory and then API and auth, You'll see we have a dynamic route here that exports this handle auth. Basically this is all the configuration we need for the SDK itself to generate API endpoints Or login, logout, callback, and a me or a profile information route. So all of that stuff is configured for us. From there, we can look inside of our components directory and inside of our navbar notice there's a use user hook here. This is configured inside of the underscore app. Js where we wrap our entire app with the user provider also provided by the SDK. And then we can access information about the user. We can determine whether or not they're logged in or if we're currently loading the user state and then show different things Based on that, so you can see here inside of our JSX, we're conditionally rendering a couple of different Nav items based on if the user is logged in or not. Now if you're interested in a little bit more about what this SDK can do inside of Next. You can check out the GitHub repository for all the details. A couple of things I wanna call out are these higher order functions with API auth required and with page auth required. If you use these, you can protect your pages and your APIs against unauthenticated users.
This is one of the quickest and easy ways easiest ways I've seen in Next. Js to be able to protect your API endpoints and your pages so it works really really well. So here's a few other things you can do with Auth0. You can set up multi factor authentication with text messages and emails and even device biometrics using something like your fingerprint.
security
AllcERA can also help you handle roles and permissions so that you can add role based access control to your applications. Another really cool feature that we have inside of all 0 something called actions where you can customize, right, custom logic during the authentication flow.
If you need to save a record to your own database or if you need to notify a user or something, you can add that custom code right inside of the Auth0 dashboard. Lastly, there are SDKs for a lot of different languages and frameworks that you might be interested in using like the one we saw here in Next.
databases
data management
Js. Alright so that was a little bit more about Allcros specifically in the context of a Next. Js app. I hope you enjoyed it.
Auth0, a user authentication and authorization platform that serves as the front door to your application. Before someone can start using your app securely, they need to prove their identity. Historically, the most common method is email password authentication. As a developer, this requires you to create an interface on the front end to collect the password, then pass it off to a server and database to store it on the back end for future use. Your front end interface needs to look good, while your back end code needs to be secure and reliable. Auth0 is a universal solution that handles all of these concerns for view, it provides a polished login experience that you can drop into any web or mobile app while also providing the infrastructure to store that data securely. Think of it like a universal translator that sits in between your front end, back end, and other third party tools to manage the identity of your users. But modern applications tend to require user authentication methods that are far more complex than email password login. Users may want to log in with a social provider, like Apple or Google, using the OpenID Connect standard. Or you may require multi factor authentication to send a text message to the user before unlocking the door. Or you may want to take things even further to validate biometrics like a fingerprint scan. Auth0 supports all of these authentication methods out of the box and allows you to customize the flow with a click of a After sign up, each user is assigned a unique ID, and the record can be managed from the dashboard. You might view their login history or devices, or maybe you want to block a malicious user. You can also define custom authorization logic in the form of roles and permissions. You can then read this data from a front end or back end environment with an SDK for virtually every run time and a rest API for everything else. This has been Auth 0 in 100 seconds, but stay tuned because I've invited a friend of mine, in James q Quick to take us beyond 100 seconds to integrate Auth 0 in a Next JS app. He's a developer advocate at Auth 0 and also has an awesome YouTube channel that you should definitely subscribed to. Hi, everyone. My name is James, and I'm here to take you beyond 100 seconds in your journey to learning more about Auth 0. So So let's go ahead and see how to set up Auth0 inside of a Next. Js application in less than 10 minutes. Alright. So the first thing you'll want to do is sign up for a free account in Auth0. 0 you'll have a link that you can sign up with in the description below so I'm going to go ahead and log in and then we'll get started creating our application. Alright. Now that I'm logged in to Auth0, I'm here on the Auth0 dashboard. Now Auth0 has what are called tenants and you'll need to Create a tenant to get started. A tenant is basically a grouping of your applications. So in this case I'm inside of my James Kukwik demos tenant. From there I can go into applications and I can create a new application. Now when we try to create a new application we're gonna have a couple of different types. What we're gonna choose is a regular web application. What this means is we're able to take advantage of the server side aspect of Next. Js. And so in this case, we'll create a regular web application. So I'll call this my Next JS app. And then after this is created under the quick start, there is some starter code that we can use for a bunch of different platforms. So if you're not familiar with React and Next JS, You can check out all the different platforms and frameworks that we have available to you to get started. But I'm gonna choose Next. Js and I'm gonna download the Sample project and it says there's a couple of different settings that we'll need to update inside of, uh, the Aussieer dashboard as we go through this. So let's go ahead and down Load this repository. With that downloaded, let's go back into our settings and I'll show you a couple of things we need to pay attention to. When we open that source code, we'll need to know our Our domain and our client ID. The domain is our tenant and then dot and then our geography here in us.all at.com, and then the client ID is a unique identifier for this application. So one thing we need to do is scroll on down and update our callback URLs and what this is is the acceptable URLs that all 0 can call back to after authentication happens so we redirect the user to boss 0 they authenticate and they redirect the user back to this URL now this is going to be an API endpoint inside of our Next. Js application And then for our allow allowed logout URLs, we'll just have local host 3,000. So I'm gonna scroll all the way to the bottom, make sure to save these settings, And then I'm gonna open up this sample code, the starter code inside of Versus Code. Okay. I've got that sample code downloaded and opened inside of Versus Code. So the first thing I'm gonna do is run the npm install command, which will go and install all of our necessary packages. Now as that is Stalling, notice we have a dotenv dot local file and inside of this file we have configured a secret here where we need to I'll replace this with some sort of random secret which is used to sign cookies. We could more intelligently create this but for now we can just add in a random string. Then we have our base URL, which is the local host 3,000, the issuer base URL, which is that domain that we just looked at, The client ID which is already populated in here and then also the client secret. Now because this has a server side aspect in Next. Js, we're able to keep a secret. In this case, we can keep this client secret safely inside of our project. Alright. With all of that in place, I'm gonna run the npm run dev command and this will start up our dev server and so after it is up and running we can open a new tab to localhost3000 And once this opens up notice we'll have this login button here where we can go ahead and log in. This will do the redirect over to Auth0. I've got a Twitter option configured here, but by default you'll have sign in with Google available to you and then you'll have the ability to log in with email and password. So if this is your first time you'll have to go through the sign up section for your email and password or you can choose the Google provider. In this case I'm gonna log in with my email and password. Alright. After I finish that login process, notice I've got my profile picture up here. And then if I go to the profile page, I can see a little bit of information about myself as a user. So you might be wondering how much code did it take to implement all this? Well, I wanna show you how cool and easy it is to set up Auth0 inside of a Next. Js application. First of all inside of our package. Json file you will see that we have the Auth0 Next JS Auth0 package installed and then inside of our pages directory and then API and auth, You'll see we have a dynamic route here that exports this handle auth. Basically this is all the configuration we need for the SDK itself to generate API endpoints Or login, logout, callback, and a me or a profile information route. So all of that stuff is configured for us. From there, we can look inside of our components directory and inside of our navbar notice there's a use user hook here. This is configured inside of the underscore app. Js where we wrap our entire app with the user provider also provided by the SDK. And then we can access information about the user. We can determine whether or not they're logged in or if we're currently loading the user state and then show different things Based on that, so you can see here inside of our JSX, we're conditionally rendering a couple of different Nav items based on if the user is logged in or not. Now if you're interested in a little bit more about what this SDK can do inside of Next. You can check out the GitHub repository for all the details. A couple of things I wanna call out are these higher order functions with API auth required and with page auth required. If you use these, you can protect your pages and your APIs against unauthenticated users. This is one of the quickest and easy ways easiest ways I've seen in Next. Js to be able to protect your API endpoints and your pages so it works really really well. So here's a few other things you can do with Auth0. You can set up multi factor authentication with text messages and emails and even device biometrics using something like your fingerprint. AllcERA can also help you handle roles and permissions so that you can add role based access control to your applications. Another really cool feature that we have inside of all 0 something called actions where you can customize, right, custom logic during the authentication flow. If you need to save a record to your own database or if you need to notify a user or something, you can add that custom code right inside of the Auth0 dashboard. Lastly, there are SDKs for a lot of different languages and frameworks that you might be interested in using like the one we saw here in Next. Js. Alright so that was a little bit more about Allcros specifically in the context of a Next. Js app. I hope you enjoyed it.
Auth0,
auth0
a
a
user
user
authentication
authentication
and
and
authorization
authorization
platform
platform
that
that
serves
serves
as
as
the
the
front
front
door
door
to
to
your
your
application.
application
Before
before
someone
someone
can
can
start
start
using
using
your
your
app
app
securely,
securely
they
they
need
need
to
to
prove
prove
their
their
identity.
identity
Historically,
historically
the
the
most
most
common
common
method
method
is
is
email
email
password
password
authentication.
authentication
As
as
a
a
developer,
developer
this
this
requires
requires
you
you
to
to
create
create
an
an
interface
interface
on
on
the
the
front
front
end
end
to
to
collect
collect
the
the
password,
password
then
then
pass
pass
it
it
off
off
to
to
a
a
server
server
and
and
database
database
to
to
store
store
it
it
on
on
the
the
back
back
end
end
for
for
future
future
use.
use
Your
your
front
front
end
end
interface
interface
needs
needs
to
to
look
look
good,
good
while
while
your
your
back
back
end
end
code
code
needs
needs
to
to
be
be
secure
secure
and
and
reliable.
reliable
Auth0
auth0
is
is
a
a
universal
universal
solution
solution
that
that
handles
handles
all
all
of
of
these
these
concerns
concerns
for
for
view,
view
it
it
provides
provides
a
a
polished
polished
login
login
experience
experience
that
that
you
you
can
can
drop
drop
into
into
any
any
web
web
or
or
mobile
mobile
app
app
while
while
also
also
providing
providing
the
the
infrastructure
infrastructure
to
to
store
store
that
that
data
data
securely.
securely
Think
think
of
of
it
it
like
like
a
a
universal
universal
translator
translator
that
that
sits
sits
in
in
between
between
your
your
front
front
end,
end
back
back
end,
end
and
and
other
other
third
third
party
party
tools
tools
to
to
manage
manage
the
the
identity
identity
of
of
your
your
users.
users
But
but
modern
modern
applications
applications
tend
tend
to
to
require
require
user
user
authentication
authentication
methods
methods
that
that
are
are
far
far
more
more
complex
complex
than
than
email
email
password
password
login.
login
Users
users
may
may
want
want
to
to
log
log
in
in
with
with
a
a
social
social
provider,
provider
like
like
Apple
apple
or
or
Google,
google
using
using
the
the
OpenID
openid
Connect
connect
standard.
standard
Or
or
you
you
may
may
require
require
multi
multi
factor
factor
authentication
authentication
to
to
send
send
a
a
text
text
message
message
to
to
the
the
user
user
before
before
unlocking
unlocking
the
the
door.
door
Or
or
you
you
may
may
want
want
to
to
take
take
things
things
even
even
further
further
to
to
validate
validate
biometrics
biometrics
like
like
a
a
fingerprint
fingerprint
scan.
scan
Auth0
auth0
supports
supports
all
all
of
of
these
these
authentication
authentication
methods
methods
out
out
of
of
the
the
box
box
and
and
allows
allows
you
you
to
to
customize
customize
the
the
flow
flow
with
with
a
a
click
click
of
of
a
a
After
after
sign
sign
up,
up
each
each
user
user
is
is
assigned
assigned
a
a
unique
unique
ID,
id
and
and
the
the
record
record
can
can
be
be
managed
managed
from
from
the
the
dashboard.
dashboard
You
you
might
might
view
view
their
their
login
login
history
history
or
or
devices,
devices
or
or
maybe
maybe
you
you
want
want
to
to
block
block
a
a
malicious
malicious
user.
user
You
you
can
can
also
also
define
define
custom
custom
authorization
authorization
logic
logic
in
in
the
the
form
form
of
of
roles
roles
and
and
permissions.
permissions
You
you
can
can
then
then
read
read
this
this
data
data
from
from
a
a
front
front
end
end
or
or
back
back
end
end
environment
environment
with
with
an
an
SDK
sdk
for
for
virtually
virtually
every
every
run
run
time
time
and
and
a
a
rest
rest
API
api
for
for
everything
everything
else.
else
This
this
has
has
been
been
Auth
auth
0
0
in
in
100
100
seconds,
seconds
but
but
stay
stay
tuned
tuned
because
because
I've
i've
invited
invited
a
a
friend
friend
of
of
mine,
mine
in
in
James
james
q
q
Quick
quick
to
to
take
take
us
us
beyond
beyond
100
100
seconds
seconds
to
to
integrate
integrate
Auth
auth
0
0
in
in
a
a
Next
next
JS
js
app.
app
He's
he's
a
a
developer
developer
advocate
advocate
at
at
Auth
auth
0
0
and
and
also
also
has
has
an
an
awesome
awesome
YouTube
youtube
channel
channel
that
that
you
you
should
should
definitely
definitely
subscribed
subscribed
to.
to
Hi,
hi
everyone.
everyone
My
my
name
name
is
is
James,
james
and
and
I'm
i'm
here
here
to
to
take
take
you
you
beyond
beyond
100
100
seconds
seconds
in
in
your
your
journey
journey
to
to
learning
learning
more
more
about
about
Auth
auth
0.
0
So
so
So
so
let's
let's
go
go
ahead
ahead
and
and
see
see
how
how
to
to
set
set
up
up
Auth0
auth0
inside
inside
of
of
a
a
Next.
next
Js
js
application
application
in
in
less
less
than
than
10
10
minutes.
minutes
Alright.
alright
So
so
the
the
first
first
thing
thing
you'll
you'll
want
want
to
to
do
do
is
is
sign
sign
up
up
for
for
a
a
free
free
account
account
in
in
Auth0.
auth0
0
0
you'll
you'll
have
have
a
a
link
link
that
that
you
you
can
can
sign
sign
up
up
with
with
in
in
the
the
description
description
below
below
so
so
I'm
i'm
going
going
to
to
go
go
ahead
ahead
and
and
log
log
in
in
and
and
then
then
we'll
we'll
get
get
started
started
creating
creating
our
our
application.
application
Alright.
alright
Now
now
that
that
I'm
i'm
logged
logged
in
in
to
to
Auth0,
auth0
I'm
i'm
here
here
on
on
the
the
Auth0
auth0
dashboard.
dashboard
Now
now
Auth0
auth0
has
has
what
what
are
are
called
called
tenants
tenants
and
and
you'll
you'll
need
need
to
to
Create
create
a
a
tenant
tenant
to
to
get
get
started.
started
A
a
tenant
tenant
is
is
basically
basically
a
a
grouping
grouping
of
of
your
your
applications.
applications
So
so
in
in
this
this
case
case
I'm
i'm
inside
inside
of
of
my
my
James
james
Kukwik
kukwik
demos
demos
tenant.
tenant
From
from
there
there
I
i
can
can
go
go
into
into
applications
applications
and
and
I
i
can
can
create
create
a
a
new
new
application.
application
Now
now
when
when
we
we
try
try
to
to
create
create
a
a
new
new
application
application
we're
we're
gonna
gonna
have
have
a
a
couple
couple
of
of
different
different
types.
types
What
what
we're
we're
gonna
gonna
choose
choose
is
is
a
a
regular
regular
web
web
application.
application
What
what
this
this
means
means
is
is
we're
we're
able
able
to
to
take
take
advantage
advantage
of
of
the
the
server
server
side
side
aspect
aspect
of
of
Next.
next
Js.
js
And
and
so
so
in
in
this
this
case,
case
we'll
we'll
create
create
a
a
regular
regular
web
web
application.
application
So
so
I'll
i'll
call
call
this
this
my
my
Next
next
JS
js
app.
app
And
and
then
then
after
after
this
this
is
is
created
created
under
under
the
the
quick
quick
start,
start
there
there
is
is
some
some
starter
starter
code
code
that
that
we
we
can
can
use
use
for
for
a
a
bunch
bunch
of
of
different
different
platforms.
platforms
So
so
if
if
you're
you're
not
not
familiar
familiar
with
with
React
react
and
and
Next
next
JS,
js
You
you
can
can
check
check
out
out
all
all
the
the
different
different
platforms
platforms
and
and
frameworks
frameworks
that
that
we
we
have
have
available
available
to
to
you
you
to
to
get
get
started.
started
But
but
I'm
i'm
gonna
gonna
choose
choose
Next.
next
Js
js
and
and
I'm
i'm
gonna
gonna
download
download
the
the
Sample
sample
project
project
and
and
it
it
says
says
there's
there's
a
a
couple
couple
of
of
different
different
settings
settings
that
that
we'll
we'll
need
need
to
to
update
update
inside
inside
of,
of
uh,
uh
the
the
Aussieer
aussieer
dashboard
dashboard
as
as
we
we
go
go
through
through
this.
this
So
so
let's
let's
go
go
ahead
ahead
and
and
down
down
Load
load
this
this
repository.
repository
With
with
that
that
downloaded,
downloaded
let's
let's
go
go
back
back
into
into
our
our
settings
settings
and
and
I'll
i'll
show
show
you
you
a
a
couple
couple
of
of
things
things
we
we
need
need
to
to
pay
pay
attention
attention
to.
to
When
when
we
we
open
open
that
that
source
source
code,
code
we'll
we'll
need
need
to
to
know
know
our
our
Our
our
domain
domain
and
and
our
our
client
client
ID.
id
The
the
domain
domain
is
is
our
our
tenant
tenant
and
and
then
then
dot
dot
and
and
then
then
our
our
geography
geography
here
here
in
in
us.all
us.all
at.com,
at.com
and
and
then
then
the
the
client
client
ID
id
is
is
a
a
unique
unique
identifier
identifier
for
for
this
this
application.
application
So
so
one
one
thing
thing
we
we
need
need
to
to
do
do
is
is
scroll
scroll
on
on
down
down
and
and
update
update
our
our
callback
callback
URLs
urls
and
and
what
what
this
this
is
is
is
is
the
the
acceptable
acceptable
URLs
urls
that
that
all
all
0
0
can
can
call
call
back
back
to
to
after
after
authentication
authentication
happens
happens
so
so
we
we
redirect
redirect
the
the
user
user
to
to
boss
boss
0
0
they
they
authenticate
authenticate
and
and
they
they
redirect
redirect
the
the
user
user
back
back
to
to
this
this
URL
url
now
now
this
this
is
is
going
going
to
to
be
be
an
an
API
api
endpoint
endpoint
inside
inside
of
of
our
our
Next.
next
Js
js
application
application
And
and
then
then
for
for
our
our
allow
allow
allowed
allowed
logout
logout
URLs,
urls
we'll
we'll
just
just
have
have
local
local
host
host
3,000.
3,000
So
so
I'm
i'm
gonna
gonna
scroll
scroll
all
all
the
the
way
way
to
to
the
the
bottom,
bottom
make
make
sure
sure
to
to
save
save
these
these
settings,
settings
And
and
then
then
I'm
i'm
gonna
gonna
open
open
up
up
this
this
sample
sample
code,
code
the
the
starter
starter
code
code
inside
inside
of
of
Versus
versus
Code.
code
Okay.
okay
I've
i've
got
got
that
that
sample
sample
code
code
downloaded
downloaded
and
and
opened
opened
inside
inside
of
of
Versus
versus
Code.
code
So
so
the
the
first
first
thing
thing
I'm
i'm
gonna
gonna
do
do
is
is
run
run
the
the
npm
npm
install
install
command,
command
which
which
will
will
go
go
and
and
install
install
all
all
of
of
our
our
necessary
necessary
packages.
packages
Now
now
as
as
that
that
is
is
Stalling,
stalling
notice
notice
we
we
have
have
a
a
dotenv
dotenv
dot
dot
local
local
file
file
and
and
inside
inside
of
of
this
this
file
file
we
we
have
have
configured
configured
a
a
secret
secret
here
here
where
where
we
we
need
need
to
to
I'll
i'll
replace
replace
this
this
with
with
some
some
sort
sort
of
of
random
random
secret
secret
which
which
is
is
used
used
to
to
sign
sign
cookies.
cookies
We
we
could
could
more
more
intelligently
intelligently
create
create
this
this
but
but
for
for
now
now
we
we
can
can
just
just
add
add
in
in
a
a
random
random
string.
string
Then
then
we
we
have
have
our
our
base
base
URL,
url
which
which
is
is
the
the
local
local
host
host
3,000,
3,000
the
the
issuer
issuer
base
base
URL,
url
which
which
is
is
that
that
domain
domain
that
that
we
we
just
just
looked
looked
at,
at
The
the
client
client
ID
id
which
which
is
is
already
already
populated
populated
in
in
here
here
and
and
then
then
also
also
the
the
client
client
secret.
secret
Now
now
because
because
this
this
has
has
a
a
server
server
side
side
aspect
aspect
in
in
Next.
next
Js,
js
we're
we're
able
able
to
to
keep
keep
a
a
secret.
secret
In
in
this
this
case,
case
we
we
can
can
keep
keep
this
this
client
client
secret
secret
safely
safely
inside
inside
of
of
our
our
project.
project
Alright.
alright
With
with
all
all
of
of
that
that
in
in
place,
place
I'm
i'm
gonna
gonna
run
run
the
the
npm
npm
run
run
dev
dev
command
command
and
and
this
this
will
will
start
start
up
up
our
our
dev
dev
server
server
and
and
so
so
after
after
it
it
is
is
up
up
and
and
running
running
we
we
can
can
open
open
a
a
new
new
tab
tab
to
to
localhost3000
localhost3000
And
and
once
once
this
this
opens
opens
up
up
notice
notice
we'll
we'll
have
have
this
this
login
login
button
button
here
here
where
where
we
we
can
can
go
go
ahead
ahead
and
and
log
log
in.
in
This
this
will
will
do
do
the
the
redirect
redirect
over
over
to
to
Auth0.
auth0
I've
i've
got
got
a
a
Twitter
twitter
option
option
configured
configured
here,
here
but
but
by
by
default
default
you'll
you'll
have
have
sign
sign
in
in
with
with
Google
google
available
available
to
to
you
you
and
and
then
then
you'll
you'll
have
have
the
the
ability
ability
to
to
log
log
in
in
with
with
email
email
and
and
password.
password
So
so
if
if
this
this
is
is
your
your
first
first
time
time
you'll
you'll
have
have
to
to
go
go
through
through
the
the
sign
sign
up
up
section
section
for
for
your
your
email
email
and
and
password
password
or
or
you
you
can
can
choose
choose
the
the
Google
google
provider.
provider
In
in
this
this
case
case
I'm
i'm
gonna
gonna
log
log
in
in
with
with
my
my
email
email
and
and
password.
password
Alright.
alright
After
after
I
i
finish
finish
that
that
login
login
process,
process
notice
notice
I've
i've
got
got
my
my
profile
profile
picture
picture
up
up
here.
here
And
and
then
then
if
if
I
i
go
go
to
to
the
the
profile
profile
page,
page
I
i
can
can
see
see
a
a
little
little
bit
bit
of
of
information
information
about
about
myself
myself
as
as
a
a
user.
user
So
so
you
you
might
might
be
be
wondering
wondering
how
how
much
much
code
code
did
did
it
it
take
take
to
to
implement
implement
all
all
this?
this
Well,
well
I
i
wanna
wanna
show
show
you
you
how
how
cool
cool
and
and
easy
easy
it
it
is
is
to
to
set
set
up
up
Auth0
auth0
inside
inside
of
of
a
a
Next.
next
Js
js
application.
application
First
first
of
of
all
all
inside
inside
of
of
our
our
package.
package
Json
json
file
file
you
you
will
will
see
see
that
that
we
we
have
have
the
the
Auth0
auth0
Next
next
JS
js
Auth0
auth0
package
package
installed
installed
and
and
then
then
inside
inside
of
of
our
our
pages
pages
directory
directory
and
and
then
then
API
api
and
and
auth,
auth
You'll
you'll
see
see
we
we
have
have
a
a
dynamic
dynamic
route
route
here
here
that
that
exports
exports
this
this
handle
handle
auth.
auth
Basically
basically
this
this
is
is
all
all
the
the
configuration
configuration
we
we
need
need
for
for
the
the
SDK
sdk
itself
itself
to
to
generate
generate
API
api
endpoints
endpoints
Or
or
login,
login
logout,
logout
callback,
callback
and
and
a
a
me
me
or
or
a
a
profile
profile
information
information
route.
route
So
so
all
all
of
of
that
that
stuff
stuff
is
is
configured
configured
for
for
us.
us
From
from
there,
there
we
we
can
can
look
look
inside
inside
of
of
our
our
components
components
directory
directory
and
and
inside
inside
of
of
our
our
navbar
navbar
notice
notice
there's
there's
a
a
use
use
user
user
hook
hook
here.
here
This
this
is
is
configured
configured
inside
inside
of
of
the
the
underscore
underscore
app.
app
Js
js
where
where
we
we
wrap
wrap
our
our
entire
entire
app
app
with
with
the
the
user
user
provider
provider
also
also
provided
provided
by
by
the
the
SDK.
sdk
And
and
then
then
we
we
can
can
access
access
information
information
about
about
the
the
user.
user
We
we
can
can
determine
determine
whether
whether
or
or
not
not
they're
they're
logged
logged
in
in
or
or
if
if
we're
we're
currently
currently
loading
loading
the
the
user
user
state
state
and
and
then
then
show
show
different
different
things
things
Based
based
on
on
that,
that
so
so
you
you
can
can
see
see
here
here
inside
inside
of
of
our
our
JSX,
jsx
we're
we're
conditionally
conditionally
rendering
rendering
a
a
couple
couple
of
of
different
different
Nav
nav
items
items
based
based
on
on
if
if
the
the
user
user
is
is
logged
logged
in
in
or
or
not.
not
Now
now
if
if
you're
you're
interested
interested
in
in
a
a
little
little
bit
bit
more
more
about
about
what
what
this
this
SDK
sdk
can
can
do
do
inside
inside
of
of
Next.
next
You
you
can
can
check
check
out
out
the
the
GitHub
github
repository
repository
for
for
all
all
the
the
details.
details
A
a
couple
couple
of
of
things
things
I
i
wanna
wanna
call
call
out
out
are
are
these
these
higher
higher
order
order
functions
functions
with
with
API
api
auth
auth
required
required
and
and
with
with
page
page
auth
auth
required.
required
If
if
you
you
use
use
these,
these
you
you
can
can
protect
protect
your
your
pages
pages
and
and
your
your
APIs
apis
against
against
unauthenticated
unauthenticated
users.
users
This
this
is
is
one
one
of
of
the
the
quickest
quickest
and
and
easy
easy
ways
ways
easiest
easiest
ways
ways
I've
i've
seen
seen
in
in
Next.
next
Js
js
to
to
be
be
able
able
to
to
protect
protect
your
your
API
api
endpoints
endpoints
and
and
your
your
pages
pages
so
so
it
it
works
works
really
really
really
really
well.
well
So
so
here's
here's
a
a
few
few
other
other
things
things
you
you
can
can
do
do
with
with
Auth0.
auth0
You
you
can
can
set
set
up
up
multi
multi
factor
factor
authentication
authentication
with
with
text
text
messages
messages
and
and
emails
emails
and
and
even
even
device
device
biometrics
biometrics
using
using
something
something
like
like
your
your
fingerprint.
fingerprint
AllcERA
allcera
can
can
also
also
help
help
you
you
handle
handle
roles
roles
and
and
permissions
permissions
so
so
that
that
you
you
can
can
add
add
role
role
based
based
access
access
control
control
to
to
your
your
applications.
applications
Another
another
really
really
cool
cool
feature
feature
that
that
we
we
have
have
inside
inside
of
of
all
all
0
0
something
something
called
called
actions
actions
where
where
you
you
can
can
customize,
customize
right,
right
custom
custom
logic
logic
during
during
the
the
authentication
authentication
flow.
flow
If
if
you
you
need
need
to
to
save
save
a
a
record
record
to
to
your
your
own
own
database
database
or
or
if
if
you
you
need
need
to
to
notify
notify
a
a
user
user
or
or
something,
something
you
you
can
can
add
add
that
that
custom
custom
code
code
right
right
inside
inside
of
of
the
the
Auth0
auth0
dashboard.
dashboard
Lastly,
lastly
there
there
are
are
SDKs
sdks
for
for
a
a
lot
lot
of
of
different
different
languages
languages
and
and
frameworks
frameworks
that
that
you
you
might
might
be
be
interested
interested
in
in
using
using
like
like
the
the
one
one
we
we
saw
saw
here
here
in
in
Next.
next
Js.
js
Alright
alright
so
so
that
that
was
was
a
a
little
little
bit
bit
more
more
about
about
Allcros
allcros
specifically
specifically
in
in
the
the
context
context
of
of
a
a
Next.
next
Js
js
app.
app
I
i
hope
hope
you
you
enjoyed
enjoyed
it.
it
success
The universal authentication and authorization platform allows users to securely log in and securely access their application. It provides a reliable login experience, multi-actor authentication, and supports various authentication methods. A new developer advocate is then guided through setting up Auth0 in a Next, including updating settings and creating a tenant for a Next. The speaker then demonstrates how to install Auth0 in Next, including setting up a secret and configuring settings for a local host, and emphasizes the ease and security of using Allcros. A link is provided for more information.
Auth0 in 100 Seconds // And beyond with a Next.js Authentication Tutorial
Auth0, a user authentication and authorization platform that serves as the front door to your application. Before someone can start using your app securely, they need to prove their identity. Historically, the most common method is email password authentication. As a developer, this requires you to create an interface on the front end to collect the password, then pass it off to a server and database to store it on the back end for future use. Your front end interface needs to look good, while your back end code needs to be secure and reliable. Auth0 is a universal solution that handles all of these concerns for view, it provides a polished login experience that you can drop into any web or mobile app while also providing the infrastructure to store that data securely. Think of it like a universal translator that sits in between your front end, back end, and other third party tools to manage the identity of your users. But modern applications tend to require user authentication methods that are far more complex than email password login. Users may want to log in with a social provider, like Apple or Google, using the OpenID Connect standard. Or you may require multi factor authentication to send a text message to the user before unlocking the door. Or you may want to take things even further to validate biometrics like a fingerprint scan. Auth0 supports all of these authentication methods out of the box and allows you to customize the flow with a click of a After sign up, each user is assigned a unique ID, and the record can be managed from the dashboard. You might view their login history or devices, or maybe you want to block a malicious user. You can also define custom authorization logic in the form of roles and permissions. You can then read this data from a front end or back end environment with an SDK for virtually every run time and a rest API for everything else. This has been Auth 0 in 100 seconds, but stay tuned because I've invited a friend of mine, in James q Quick to take us beyond 100 seconds to integrate Auth 0 in a Next JS app. He's a developer advocate at Auth 0 and also has an awesome YouTube channel that you should definitely subscribed to. Hi, everyone. My name is James, and I'm here to take you beyond 100 seconds in your journey to learning more about Auth 0. So So let's go ahead and see how to set up Auth0 inside of a Next. Js application in less than 10 minutes. Alright. So the first thing you'll want to do is sign up for a free account in Auth0. 0 you'll have a link that you can sign up with in the description below so I'm going to go ahead and log in and then we'll get started creating our application. Alright. Now that I'm logged in to Auth0, I'm here on the Auth0 dashboard. Now Auth0 has what are called tenants and you'll need to Create a tenant to get started. A tenant is basically a grouping of your applications. So in this case I'm inside of my James Kukwik demos tenant. From there I can go into applications and I can create a new application. Now when we try to create a new application we're gonna have a couple of different types. What we're gonna choose is a regular web application. What this means is we're able to take advantage of the server side aspect of Next. Js. And so in this case, we'll create a regular web application. So I'll call this my Next JS app. And then after this is created under the quick start, there is some starter code that we can use for a bunch of different platforms. So if you're not familiar with React and Next JS, You can check out all the different platforms and frameworks that we have available to you to get started. But I'm gonna choose Next. Js and I'm gonna download the Sample project and it says there's a couple of different settings that we'll need to update inside of, uh, the Aussieer dashboard as we go through this. So let's go ahead and down Load this repository. With that downloaded, let's go back into our settings and I'll show you a couple of things we need to pay attention to. When we open that source code, we'll need to know our Our domain and our client ID. The domain is our tenant and then dot and then our geography here in us.all at.com, and then the client ID is a unique identifier for this application. So one thing we need to do is scroll on down and update our callback URLs and what this is is the acceptable URLs that all 0 can call back to after authentication happens so we redirect the user to boss 0 they authenticate and they redirect the user back to this URL now this is going to be an API endpoint inside of our Next. Js application And then for our allow allowed logout URLs, we'll just have local host 3,000. So I'm gonna scroll all the way to the bottom, make sure to save these settings, And then I'm gonna open up this sample code, the starter code inside of Versus Code. Okay. I've got that sample code downloaded and opened inside of Versus Code. So the first thing I'm gonna do is run the npm install command, which will go and install all of our necessary packages. Now as that is Stalling, notice we have a dotenv dot local file and inside of this file we have configured a secret here where we need to I'll replace this with some sort of random secret which is used to sign cookies. We could more intelligently create this but for now we can just add in a random string. Then we have our base URL, which is the local host 3,000, the issuer base URL, which is that domain that we just looked at, The client ID which is already populated in here and then also the client secret. Now because this has a server side aspect in Next. Js, we're able to keep a secret. In this case, we can keep this client secret safely inside of our project. Alright. With all of that in place, I'm gonna run the npm run dev command and this will start up our dev server and so after it is up and running we can open a new tab to localhost3000 And once this opens up notice we'll have this login button here where we can go ahead and log in. This will do the redirect over to Auth0. I've got a Twitter option configured here, but by default you'll have sign in with Google available to you and then you'll have the ability to log in with email and password. So if this is your first time you'll have to go through the sign up section for your email and password or you can choose the Google provider. In this case I'm gonna log in with my email and password. Alright. After I finish that login process, notice I've got my profile picture up here. And then if I go to the profile page, I can see a little bit of information about myself as a user. So you might be wondering how much code did it take to implement all this? Well, I wanna show you how cool and easy it is to set up Auth0 inside of a Next. Js application. First of all inside of our package. Json file you will see that we have the Auth0 Next JS Auth0 package installed and then inside of our pages directory and then API and auth, You'll see we have a dynamic route here that exports this handle auth. Basically this is all the configuration we need for the SDK itself to generate API endpoints Or login, logout, callback, and a me or a profile information route. So all of that stuff is configured for us. From there, we can look inside of our components directory and inside of our navbar notice there's a use user hook here. This is configured inside of the underscore app. Js where we wrap our entire app with the user provider also provided by the SDK. And then we can access information about the user. We can determine whether or not they're logged in or if we're currently loading the user state and then show different things Based on that, so you can see here inside of our JSX, we're conditionally rendering a couple of different Nav items based on if the user is logged in or not. Now if you're interested in a little bit more about what this SDK can do inside of Next. You can check out the GitHub repository for all the details. A couple of things I wanna call out are these higher order functions with API auth required and with page auth required. If you use these, you can protect your pages and your APIs against unauthenticated users. This is one of the quickest and easy ways easiest ways I've seen in Next. Js to be able to protect your API endpoints and your pages so it works really really well. So here's a few other things you can do with Auth0. You can set up multi factor authentication with text messages and emails and even device biometrics using something like your fingerprint. AllcERA can also help you handle roles and permissions so that you can add role based access control to your applications. Another really cool feature that we have inside of all 0 something called actions where you can customize, right, custom logic during the authentication flow. If you need to save a record to your own database or if you need to notify a user or something, you can add that custom code right inside of the Auth0 dashboard. Lastly, there are SDKs for a lot of different languages and frameworks that you might be interested in using like the one we saw here in Next. Js. Alright so that was a little bit more about Allcros specifically in the context of a Next. Js app. I hope you enjoyed it.
The universal authentication and authorization platform allows users to securely log in and securely access their application. It provides a reliable login experience, multi-actor authentication, and supports various authentication methods. A new developer advocate is then guided through setting up Auth0 in a Next, including updating settings and creating a tenant for a Next. The speaker then demonstrates how to install Auth0 in Next, including setting up a secret and configuring settings for a local host, and emphasizes the ease and security of using Allcros. A link is provided for more information.