* This is an automatic transcription. Please excuse inaccuracies.
Hey, my name is Sebastian. I'm the product manager here at 8base. if you find this video helpful please like it as well as subscribe to our channel it really helps us grow. So, I'm excited to say that this is actually a pretty anticipated video from our 8based community. we're going to be going over how do you integrate auth0 with 8base.
So, when it comes to authentication and 8base there's actually one really important concept that you need to understand, which is that an 8base you don't store passwords and we don't store passwords. What we do is we use an authentication provider to store passwords and handle authentication. And then our API can read the JSON web tokens with the ID tokens that that authentication provider issues.
Now this means that under the hood currently we actually just use auth0 to provide authentication; however, it could be any auth provider. And we also give our developers the option of bringing their own authentication providers to their workspace. For example, one like auth0 or Cognito Okta, whoever you want to use. In this tutorial that we're going to be going over how can you bring your own auth0 to 8base or your auth account to 8base and set that up with using two different types of authentication. The one way we're going to do it is directly interfacing with the base graph QL API and the other way we're going to do it is the hosted login page with redirect. So, let's just jump right into it and go ahead.
So, one thing to visualize really quickly to hopefully help understand how the authentication is working is when you have a front-end application you want someone to log in, you can either send them to a hosted login page or you skip the login page and you just send their credentials directly to [in this case we're using the Graph QL 8base. Now 8base then is going to look at the authentication profile that you set up and then communicate with the appropriate authentication provider. If the credentials passed were valid, we're then going to issue a token back to the front-end; which then whenever you're making API requests you can pass as a bearer token. Whenever those bearer tokens are used, we verify them to make sure that they're valid and that's then the communication that's essentially happening between those two systems.
Now we can go deeper on that if we one, two; however, I would recommend checking out the 8base docs to dive in a little deeper and understand it at a lower level.
With that said the first thing we're going to do is do the straightforward hosted login page with redirect authentication. And the way we're going to do that is actually by starting here and auth0. Now what this means is that when a user wants to login to our application, we're actually going to send them to a hosted login page in which they go about authentication and then auth0 will redirect them back to our app with all the auth results stored as hash parameters in the URL.
So, to start this process what we're going to need to do is actually create a new application auth0. So, we're going to click on create application. And depending on the type of application that you're building, here we either do a regular web application or a single page application. We're going to do a single page application because I built a little simple react application to show these examples in practice. So, I'm just saying use single page web application and I'm going to say that, this is my SPA demo app. Go ahead and create that well.
Now what it's going to do if we go over to settings is, give us all these different keys that we're going to need to use. But we're also going to need to set some white listed URLs. So, for example, my app is going to be running on localhost, so I'm going to HTTP localhost 3,000. And this is the callback URL, so this means that after someone's authenticated what you path should auth0 redirect them back to and that's where you're going to have to handle the auth result. So, I'm going to say it's going to be at auth/callback.
Now for the logout URL we're going to also whitelist what URL someone will be sent to after they log out. So, I'm going to do HTTP/localhost3000/ logout. And then finally what is the allowed web of orange in; so, we're just going to take our localhost and again drop that right in there. For example, you know if your website was called letmelogin.com you'd be using letmelogin.com instead of the localhost, but we're all going to have this in development so it doesn't really matter.
So, then I'm going to go down and I'm going to save my changes all right now what I'm going to need to do is go over to the 8base side of things and actually start or input some of these different credentials so we can build that connection.
So, I'm going to go into an 8 base workspace I have here and I'm going to go to my app services.
Now under authentication here's where I can add an authentication profile. I'm going to click in there. I'm going to say this is for hosted login page auth name. I’m going to select my own auth0 account. So, here's where it's asking for all this information right so what I'm going to do is I'm going to say, okay well I want to get the domain. Let me go back there drop the domain in. I want to get the client ID- drop the client ID in there I take my clients secret- client secret. And then it's going to ask for the database name. So, what we're going to do is we're going to go up here to our connections and we can see that by default, we have the username password authentication database- so I'm just going to use that one right there. Okay go back auth0 and drop that database name in there. And then if you had a custom URL for your auth management domain you'd want to add that in here, but we don't so we're not going to have to use it.
I'm going to say that this is an open to all signup page and this is all 8base stuff and that anyone that signs up is automatically going to be assigned to the guest role.
I'm going to add that profile and once done cool we have that we have that done there.
So, now what we can actually do is jump over to the kind of that demo app that I built and add these credentials and actually just go straight through the hosts of login experience; it's pretty straightforward.
So, let me click over to vs code, I'm going to open this client, open the source.
Now there's a few things that we are going to want to do when it comes to hosted login page. So, first off, we set all those redirect URLs right. So, if I go into this app that I built- this react app I scroll down you can see that for the callback component and the login page I had to set three different routes; a logout route; the callback route; and then just the page that we're going to initiate the login from that could be your home page or even your navbar if you wanted to do it that way.
So, let's go first look at the login page. So, that's the hosted login page example by going here and I see prompt.JS.
So, we can see that here is that we're importing this auth module and we have this login button that when it's clicked, we just call this authorized method on there. Let's go see what the utils auth module looks like. I'm going to utils, auth you can see here that's a pretty straightforward initialization for the client. We import it from 8base auth, we call this create client method on it, we're giving it the strategy which is web auth0. There are different strategies that you can use for authentication this one will work for auth0 and then what we need to add is the domain and the client ID.
So, I'm just going to grab those really quickly from auth0 because they're easier more easily found there. First let me take the domain cool and drop that in here. Excellent! And then I'm going to go grab the client ID right there. Excellent! And bring it back.
And then what you can see what we did here too is for the redirect URI and the logout redirect URI, we are just taking the location origin from the DOM and then appending or however you want to save the string coercion- but adding the path that needs to be there, so that those settings are properly configured. So, we save that and that's actually it for this part.
So, let's go ahead and boot up this application. It might take a minute so we will be back when it does. Alright so here now we can go to our hosted login redirect page. So, here we have this button which we saw that we're going to call that authorized message on or method on.
So, if I click it you see it took me off to a completely different page where now here's where we're going to handle all our authentication stuff. If we wanted to, we could sign up, we could login in or we could do a forgot password and auth0 by default we just send us an email.
So, I've already signed up for my app or actually- no I have it so I'm going to go ahead and sign up with my Google+ profile. I'm going to say okay authorize. All right and so it sent me back to the app after authorizing and you can see that it had got my email, it passed the ID token and this is the ID token that we can then use to interact with the 8base API. And then it gave some other payload information like my name a family name, nickname picture generated for me and some other information. And depending on how you're using your auth0 profile, you can adjust these things however you want to now. Also, you can see that since I did a single sign-on or social sign-on my emails verified, whereas if you the user had signed up with just email password it would have not been verified and they would have gotten an email- but you can customize all those emails on auth0 as often as you need to.
So, now I have this logout button and if I go back to text editor, we can see that if on the callback- well first let's actually go through this callback. So, when it redirected it redirected us to the callback path and then we get this component rendered. Now this component when rendered, pretty simple, just has you know some basic template and then it has that when there's an auth result or when the auth results undefined say it's loading the auth0 result but then show the author's all. Now just for the sake of demonstration, I just pretty much print it out the results from the key value standpoint right. But this is where you'd want to take that result and store it in local storage, put in your state management system, however you want to keep that ID token and potentially refresh token and whatnot. However, what we're doing here is once the components mounted we're calling our auth module or using our auth module to call this get authorized data method which then once it's done it returns the auth result and we're setting that in the state and if there was an issue we're setting the issue in the state as well just because it would print it out for the sake of this demo. But right there is the moment that we are actually getting our ID token and all the other author information that we need.
Now what we can see here too is that we have this logout button that when you call when you click it, it calls the logout method on the auth module. And what will that would do is successfully log us out and bring us to our logout path.
Now all these routes and whatnot are customizable. Maybe you want different flows. Maybe you want to automatically redirect someone back to a home page; however, you want to configure it, it's completely up to you. But what's really cool up the hosted login experience is you can see just in a couple minutes almost we were able to fully set up an authentication a system for application and get the information that we need back to start securely making calls to the 8base API.
So, what we're then going to do now is just go back over to our app, click the logout button and we can see what it did is brought us right to the logout path that we wanted to use.
Now what if you do not want to use the hosted login experience that's absolutely fine. The 8base API actually offers by default some of the authentication resolvers or mutations that you need to have to log in users, sign them up with passwords or sign them up with tokens and perform other actions like that. And so now what we're going to do is, pretty much go through some of the same steps, but doing it for if you didn't want to use hosted login and instead just wanted to use the Graph QL API to build your own login experience. So, how we're going to start that is going by going back over to auth0.
Now we're going to create a whole different application for this and we have to understand when using the 8base graph QL API is all the requests are going to 8base and then 8base is the one making the request to auth0. So, when we create this new application what we actually want to create is a machine-to-machine application since it's the 8base server talking to your authors your management API. Let's just call this my eighth base workspace select machine-to-machine and create that app.
Now it's going to ask what API we want to get permission to we could create our own API, but we're going to use the auth0 management API by default.
Now we're going to need to make sure that our 8base or the 8based workspace is able to see which users are in your auth0 tenant as well as create users in there. And depending on what else you're doing you might need to add some more scopes and permissions to this connection, however for what we're doing here, these two are the basics that we need.
Now I'm going to go ahead and authorize this application alright so it gives us a little bit more information down here on you know depending on what languages we're working with, how we can interface with the with the management API. However, I'm going to go over to my settings I'm going to scroll down to the bottom and under advanced settings here, I'm going to specify that the we also need the password grant type- this is what will actually allow us to have people log in. I'm going to save that change and after doing that I'm now going to head back over to 8base.
Now I'm going to add another authentication profile and that's going to be called my graph QL API auth. Once again, I'm going to say my auth0 or you're auth0 and then I'm going to go and get this information. Once again so let's drop in the management domain, let's drop in the client ID drop in a client secret, then we're going to add the same username password database. So, if I go down to connections database, so I can copy it… let's see auth0- all right looks like it's loading for some reason. There we go- just click on here and here we can see that if we look at the applications it's turned on for the my 8based works-based application. So, take that drop it, drop it in here and once again we can leave the auth0 management domain blank because we're using the default management API. I'm going to say this is open all as well and I'm also going to say that, someone that signs in gets the guest role now we're going to add that profile cool was created.
Now what we have to do is we're have to go back in and update the update the login form that we built in the react app that that we'll use now this new authentication profile. So, what we can see here is if we go back to our main app page, we have this one route to this graph QL API example component. So, if we go into our views and graph QL API example, you can see there's just one form.
Now this is a little more involved because we're handling everything on the front end through the API however it'll be pretty simple and pretty straightforward to understand. So, first off, we can see that we're bringing in this Apollo module which is a very simple just using the default Apollo client and we need to add our 8base API workspace and point to it. So, let me hop back over to 8base and go and find that which is right here in our settings- copy the endpoint URL. So, let's go back in and drop that in here. Then if we go back to that form, we can see the next thing that we import are these mutations.
Now these are all the mutations that we can use to authenticate our users right. So, for example we have the login mutation which takes an email password and the auth profile ID and then it will return if successful the refresh token and the ID token. We have a signup mutation which takes the email the password and the auth profile ID, and it signs up the user with a password returning the ID email and the word date that the user was created at when successful. And then finally, we have this forgot password mutation which takes the email and then returns a success response if successful for having sent the user a reset password email.
This is actually going to be a custom resolver that we build and so just stay tuned and we'll get how we set that up and how that one works.
Now if we go back to our form, we actually only need to add the auth profile ID because we already configured the auth profile with the necessary credentials on the server side. So, if we go back to our form what we can do is we can see if we scroll down that here in the state of this react component, we have a form which has email password an auth profile ID. So, what we were going to want to do is go back over to 8base, look at our authentication profiles and get the right one for my graph to our API auth this is the profile ID right here. This is exactly where we want to put that auth profile ID that we just got. And what's cool about this is this will actually map it to the appropriate auth profile ID which is exactly where we specified the client secret, the client ID it's a domain all that different stuff.
So, already we're at a point where a user could log or a user could log in and sign up now you know we could look a little bit at this form it's pretty straight forward. We have a very basic react component with the with the form. And when someone clicks submit the form, we're going to run those mutations that we just looked at right.
I'm going to have all this code and GitHub for you so you can take time to look through it, but it's a very straightforward email password form; just know that.
So, let's go back to our application and I'm just going to reload it and then go to our Graph QL API auth and here you can see that we have it to where we can test a sign-in we can test the sign up and we can test a reset password. So, first let's test a setup. So, I'm going to say that my email address is one randominbox@gmail.com and I'm going to put a password right there sign up. Now this is sending that to 8base which is then pinging auth0 and it's going to return the result in just a second.
Now we can see that we successfully signed up and the information that was responded or was given back was exactly what it asked for which was our ID our email and when the user was created.
Now I can actually just switch to the sign-in and it's going to maintain these based on how I built the form it's going to maintain the credentials. So, now let's test a sign-in because we just signed up. So, if I click sign-in once again it's going to go and here, we have it. We have a user log and successful; it gave us a refresh token; as well as my ID token. So, we could just use that and put it on our state and our user is authenticated so that's pretty great.
Now what about reset password in this example we're going to have to actually get auth0 to send a password reset email to the user right. And we don't have that by default on the graphical API for a number of reasons but we can add it using a custom function. So, if we go back over to our vs code to our text editor and we look in the auth functions- here we have an 8base project where we're going to deploy this resolver called user forgot password. And we can just see that here in our 8base.EMl file, user password forgot password and we have a path to the schema file and the handler file.
So, if we look at the schema, we can see it's a simple mutation that takes an email address and returns a success response true or false; very straightforward. And if we look at our handler here, what we can see is okay well we import these two modules auth management and author your authentication from auth module. We can look at that really quickly right here which we see is a simple way that we are initializing both the management client from auth0 SDK and the authentication client from auth0 SDK and then just exporting those in a single object.
Now we're going to set the domain client ID and the client secret, so let's go grab both of those. If I go back here and I go auth0, now I'm still in my 8base workspace. Perfect! So, what I'm going to start doing is copying these right over. So, first I'm going to take the domain and drop it right in here. Then I'm going to take the client ID and drop it right back in here. And then finally you guys are going to get to see my secret but I'm going to delete this as soon as I post the tutorial, so don't even try to do anything funny. However, you should set these as environment variables rather than hard code these values directly into your workspace.
So, now finally I'm going to add that secret or your function. So, I'm going to add that secret, save it and go right back to our handler function. So, now we can see we import both of those from our auth0 module. And then what we are going to do is we're going to look up our user by email address; that's why we need that read users scope when we set up our management API. Then if the user exists, we're then going to request a password email change and then when doing that we're going to supply it the connection which was the database name. And if that was successful, that user will receive an email that will allow them to go in and update their password.
Now what's important to note here is that maybe you'd want to in your resolver actually let the users submit the new password. You can do whatever you want because here you be able to communicate directly with the author your management API; so, whatever is on that SDK you would be calling or be able to use from this custom function. So, it's pretty much up to you however creative you want to get or how creative you want to get in setting up your own authentication and flows.
Now let's deploy this, so we can actually use it. Pretty simple- all I'm going to do is run 8base configure then you set it up with our workspace here. 8base configure and I'm going to go down and find my workspace which is auth0 tutorial workspace. And then I'm going to run 8base deploy. And that's going to take care of packaging and deploying our function, So, this usually takes a minute when you do it for the first time, so we'll be back once it's done.
Great so that function has deployed and that means that now if we look at our resolver over on our client project which is right here in source, utils, graph QL. Well that means that now we have this operation available on our Graph QL API.
So, what we can do is we can open back up our sample application is right here. And in the test reset password I'm going to run this reset password and whoops it says that I do not have permission for this operation; there's a reason for that. So, we just deployed the function what we're going to have to do is jump over into 8base go to our settings or go to our app services go to our roles go to our guest role; and our guest role is pretty much defining what can we do without being authenticated. And if I look here, we can say, “enable for role user forgot password”. Easy. So, back to our react app let's run that again and three two- there we go you just forgot password success.
So, I hope you found this tutorial really helpful if you're using auth0 in 8base. If you have any questions, please just reach out and ask. I'm going to make sure that there's a link to the GitHub repo right below in the description. Once again if you found this video helpful please like, as well as subscribe to our channel, it really helps us out and I look forward to seeing you in future videos. Take care.
We're excited about helping you achieve amazing results.
