 Hello everyone, my name is Tyler Clark and I'm a developer advocate by Auth0 by Octa and today I'm going to use the Auth0 View SDK to add in basic authentication to our View app. Now we've created a starter project for us to kind of build on using the Auth0 View SDK. Check out the links below in the video description to clone this repo to your machine. Once you've downloaded the repo you're going to need to cd into the spa view javascript hello world composition api folder. Once that's your current directory make sure to do an npm install to install of your node dependencies. Now once you've installed all your node modules we're going to need to create a .env file to hold some variables for our project. Now before I go any further I just want to make a note that you don't need to be an identity solution expert in order to set this up. The goal with Auth0 and the Auth0 SDK here is to allow you to focus on building your application and to let us worry about the identity part of your app. All right so let's go ahead and create this .env file so I'm going to go touch.env that's going to create that locally inside of my folder and now I need to populate this with a Vite API server URL and I'm going to use localhost 6060. Now in two different terminal tabs we need to run our api as well as our view frontend so in one terminal tab I'm going to run npm run api and then in the other one we're going to do npm run dev. All right with both of those running we are ready to start adding in the Auth0 view SDK and start setting up our user authentication. So first thing we're going to do is configure our view js application to connect it with an Auth0 account so if you don't have an Auth0 account check the links below again to sign up and create a free trial. All right so after you've either signed in or created a new account with Auth0 you're going to land on the dashboard view here and now to create that bridge between Auth0 and that view app that we have running in the background we're going to go to applications and create and register a new application inside of our Auth0 account. So I'm going to go to applications click on create applications and add in the name Auth0 view js code sample. Now this is going to be a single page web app as you can see for examples for a single page web app use Angular Reactor View or use in view so this is us and we're going to press create. Now go ahead and click on the settings tab in here we need to add in three URLs scroll down to the allowed callback URLs we're going to add in localhost 4040 slash callback. This is the URL that Auth0 can use to redirect our users to after they log in. Now a little bit below that is allowed log out URL this is the URL for when users log out and then the allowed web origins is just localhost 4040 as it says what web origin is allowed to use with Auth0 in our app. Now we need to add in the Auth0 configuration variables to our view js application so from this page in the settings page we need to grab the Auth0 domain and the Clarity values to allow our view app and the SDK to complete that communication bridge between these two. Now notice that the Auth0 callback URL is void Auth0 callback URL it points to localhost 4040 slash callback. This is the URL that Auth0 is going to use to redirect our users after they successfully log in. For this view js composition API application we're going to render a simple page and this is going to be component for the slash callback grout. So here I'm going to create a new page I'm going to do touch source pages callback dash page dot view and we're going to populate it with the following code it's going to be a template with a div a nav bar a mobile nav bar a class with a slot inside of it and then we're going to have a couple imports down here in our script tag. Now this component will only render the navigation bar and an empty content container to help create a smooth transition between a route with no content slash callback to a route with content such as the profile page which we'll see here later on. Now that's done the next step we're going to do here is integrate our callback page with the view js router so let's go ahead and navigate over to the router page that's just going to be source router slash index js file and we're going to update it like this where we're importing that component here at the top and then underneath admin I'm going to add in that path that name and the component perfect now up next we're going to install the Auth0 view SDK now a quick note here the Auth0 view SDK is only compatible with view 3 it won't work with view js 2 so now in our terminal we're going to do an impm install at Auth0 slash Auth0 dash view now once this is installed we're going to navigate over to our main js file and import the create Auth0 function from rsdk now inside of the app dot use we're going to bring in our create Auth0 and then this is where we're going to reference the domain and client ID that we got from the Auth0 dashboard so you notice here that we have the domain we're going to import that env for both of these and then for the authorization params inside of that object we've got a redirect uri and that's also going to be that callback url environment variable that we added before now that we have this added in here we're going to access the functionality of Auth0 using the use Auth0 method from within our view js components so now that we've configured the Auth0 SDK it's connected to our Auth0 application that we created remember the view spa that we got the we added those URLs to the application and then we grabbed the domain and client ID so now everything's all connected and wired up with our Auth0 account now let's go ahead and actually add in a login a sign up and a log out the authentication bread and butter here so the first thing we're going to do is create some buttons that users can click on to initiate this flow the first thing we're going to do is a login button so i'm going to go back to my terminal here as you can see and i'm going to make a new directory this is going to be slash components slash buttons the components folder already exists and then we're going to create a new file in here for a login button now i'm going to copy that with some pre-built code here feel free to pause this video and copy this down yourself but it's basically just a button with a simple class on it and it has a Heidel login function on the click now as you can see inside of this script setup we are logging in with redirect which is a function that comes to us from the Auth0 SDK this is going to login and redirect our users to whatever state that we tell it to and this is going to use the Auth0 Universal login page it's and you'll see that as we actually step through this step and see in our application live but it's going to handle all the authentication flow for us now that's all we need to simply have a login experience using the Auth0 SDK now let's repeat this but also create a sign up button so again back in the terminal let's do a sign up button creation here and then back in VS code i'm going to populate it with this code here again a similar button feel free to pause the video if you need to copy over this and come back and push play but it's just a button with a class this has a handle sign up function similar to the last button that we had this one's also using the login with redirect which is setting the target but this one's different in the fact that it has this screen underscore hint of sign up and finally let's go ahead and add the log out button so a similar page just log out button now inside of this i'm going to copy in some code that i've already created and again for the third time a third button here with a handle log out function coming from our Auth0 SDK and it has a log out function with some return to parameters basically saying just return back to the origin so no specific page within our app all right now that we have these three buttons signing up logging in logging out let's go ahead and go to both our desktop and mobile nav bars and add these buttons into the template all right so over in the nav bar file you'll notice that we have the nav bar brand the tabs and the buttons here i'm going to change this out and you'll notice that there's a couple of changes to this you can see that i'm adding in a couple conditional logic here and importing in the buttons that we just created as well as the Auth0 view SDK we're also bringing in this is authenticated which is just a Boolean flag that'll tell us if a user is currently authenticated or not on our website and then with these ifs we're going to check if a user is not authenticated then show them the sign up and login buttons that we've created however if they are authenticated then show them the log out so as you can imagine if someone's logged in already we don't really need to show them the login we actually just show them the log out and vice versa now that we've got everything saved go ahead and go to locohost 4040 and take a look at your app if you haven't already seen it yet this is what it looks like minus the buttons that we've just added to the nav bar so first of all i'm not logged in i haven't logged in yet so we're seeing the sign up and login buttons here when i press login you'll notice that we do get a redirect first of all we have left our local host we're now to Auth0 hosted server pages here and you can see that we get a login box here to login or alternatively sign up or continue with google just for kicks and giggles here let's go back and click on the sign up since we actually haven't signed up yet you notice the difference with this is it actually opens up with a sign up option first with unlike the last view that we just saw with the login as the other option so i'm going to set up with just a dummy email address here and press continue the first thing that's going to ask you here is to accept some permissions this is specifically for our application after i press accept you'll notice that it redirects us to a profile page as we defined in the login and sign up buttons and this is a little user object here about all the information that this application now knows about me now if we go back to just the main page here you'll notice that our buttons now show log out versus sign up and log in now when i press the log out all that we see here is a redirect back to the same page it doesn't even flash at all but we see that we need to sign up or log in and that's it so to recap here while this might seem like a lot because this video took about 10 minutes it wasn't a lot all we need to do is using a view application install the view sdk grab a couple values from our otzer application dashboard add a couple values to that same application like the urls and then create a couple buttons and that's all you need to get authentication added into your view app now you can definitely take this further and customize that login page and the sign up page to look more like your brand and that's another time for another video but it's really easy to do that kind of stuff and you can see that you can get up and running with authentication inside of your view app in about five minutes or less