Enable your Webflow users to log in with Google using Xano (OAuth2)

hey there my name is prakash i am the co-founder and the co-ceo of zano um today i'm excited to go through a very requested video which is how you do oauth with webflow and we're gonna do that using zano and webflow today but for those of you that don't know what oauth is and you're just here because you heard that you can get users to sign in with facebook or twitter or pick your service we're going to review or do a high level overview starting with what is oauth just to give you a primer we'll take about five minutes on that then we're gonna set up google oauth specifically using zano um and then we will get into the webflow setup it's important to note that even though we're going to use google today the concepts of what we are going to cover today remain the same for any service you might want to use with oauth so let's go ahead and get started and just do go through an introduction on what is oauth feel free to skip ahead if you just want to get to the actual setup itself so getting started um just for those of you that don't know what zano is we like to say that we're the fastest way to build a powerful scalable backend for your app without using any code so um even more basically you know every application has a front end and a back end the front end is what the user sees the back end is all of the business logic so we specifically focus on three things at zeno we give you a scalable managed server a very flexible uh database and finally a no code api builder to kind of get everything done and get everything connected which is awesome so going into just the concepts of oauth in general it's first important to know that apis in general are the glue of the internet they are what connects one service to another or they will connect your back end really with your front end right and so if you think about the most popular services you'll probably recognize these three things or these three services um all of them are uh api driven or they have apis that can connect into other services so for these specifically google has the api for their mapping product and also for user photos stripe does payments right so you don't have to learn how to build a payments infrastructure you just connect to their api and then twilio handles all messaging whether it be text messages uh or transactional email so you know services like airbnb for example might leverage these three apis to get things done right so twilio to send reservation cons or confirmations to their um uh guests stripe to basically process the payments and google to do the google maps and the way airbnb specifically communicates with stripe and twilio for example is via an api key there's usually some sort of key and secret that basically tells twilio and stripe hey i'm airbnb this is how i want to communicate with you and there's a handshake that's established there google's a little uh special because yes airbnb has that api key and secret relationship um with uh airbnb or they kind of speak to each other in that way but there's also the ability for airbnb to access for example the user's photos right like so if i'm a guest or i'm a host and i want to like list my apartment and i want to also upload the photos that are stored in my google account there has to be a way for airbnb to get that from my google account right and that's really the crux of what oauth is so getting into the nitty gritty of this example um this is a screen from uh airbnb's host workflow or onboarding process where i can upload photos from my google drive you can see that here at the bottom so this capability actually begs the question how does one service authorize access to another so specifically i'm an airbnb host and i want to give airbnb permission to access just the photos of my apartment that i want to rent out so it can then publish it to its website well there's a couple different ways that this could happen airbnb could go to google directly and say hey uh google drive service that's where the photos are kept go ahead and give me precautious photos from his google account well that's not going to happen google drive is going to say look i don't trust you i'm not there's no way i'm going to give you that access so alternatively airbnb could say like hey why don't you store your google username and password with us and then we can access your google photos at any time now while this technically could work us as users we don't feel comfortable storing our credentials with third-party services you know if there's a data breach that's really really insecure so we don't want to store our google username and password with airbnb so we say obviously no so what needs to happen is a mechanism to allow basically a trusted party to give access to both airbnb and to google and this is where o author open authorization was introduced this protocol so specifically each service airbnb and google trust this user so what ends up happening is airbnb now goes to google that same example and google basically will come to me and say hey are you okay with this are you okay with airbnb accessing your photos well i may say like yes okay and the way i do this specifically is usually through one of these dialogues you've probably seen this before when you're like continuing with facebook or google to any one of these services they say hey is it okay that we continue logging you in with facebook for example to a service and then you select specifically what you want that service to have access to so if i say allow access then google drive says okay i'm going to pass an authorization token to airbnb using what's called a limited access token now limited access is important because i'm not saying airbnb can have access to my entire google universe i'm just saying that they can have access to specifically the photos i want them to have access to so airbnb now has that they can take this limited access token and then access anytime they want using the credentials that google has provisioned with my permission to get access to those photos so i know that might feel a little complex all you need to know is that there's a third party trusted party which is me i give access to airbnb through google and google passes that limited access token to airbnb to use anytime it wants to access my photos so uh the final thing just to note is that the standard which or protocol which is mostly used today is oauth 2.0 right there is an oauth 1.0 standard in protocol but it's used far less so i think that when we talk about oauth we usually talk about oauth 2.0 okay so let's go ahead and move into the example we are where we are setting up a service where people can log in using their google account so we're going to create a backend in xano and then finally we're going to take that and then move into webflow so clicking into zano i can see that i am creating a new workspace and every zano account you do this so i'm just going to call it oauth webflow demo and i think technically it's capital a it doesn't matter what you call it so i'm going to go ahead and start from scratch i'm going to just have like a simple user database table i'll hit go ahead and hit continue i'm going to hit continue here so here on the final step it asks how will your users log in right by default we allow them to log in with email using jwe tokens however we are going to check google because that's the example that we're doing today zano obviously also supports what you're seeing here facebook linkedin auth0 and uh apple and uh and more are coming down down the pipe so i'm gonna click finish and then it's to set up my xano account okay so it says you have further work to do you have to actually set this up the reason you need to set it up is because even though we've done all the hard work for you in kind of linking up your database tables and api endpoints which we're about to cover we have to establish the relationship with google right so i'm going to go ahead and click this button and i'll be taken to the actual extension that i installed in xeno and then if i hit configure you'll see that i need to tell zano about my specific oauth client id that i get from google and the secret that i get from google now if you follow these detailed instructions this tells you exactly how to get that there's also a video walkthrough but i'm going to just do that very quickly here for you so i've already selected or started a google cloud platform project again you can go click this link and it'll take you to the same place i'm just going to call this webflow xano oauth okay and i'll go ahead and i'll hit create okay so now that i've created this um the next thing that i need to do is actually go to the oauth consent screen so i'm saying um with this particular project i need to create a place where my users can authenticate using that service so i'm just going to click this link that's going to take me directly there and i'm going to go to this oauth consent screen over here okay so it's going to ask you for the type of application um for this specific use case i'm just going to say external i'm going to let any user log into my account i'm going to go ahead and click create for the app name i'm going to say like webflow uh zano oauth i can call it anything that i want here it it makes me put in a user support email so i'll go ahead and put in my own and i don't have to fill an app domain but i do need the authorized domain and the authorized domain is basically what domain is requesting this and if you are using webflow well you're going to put webflow there if you're using another service or another domain that's the domain you would put there any domain that can request this access you're giving that authorized access to so i'm going to go ahead and again it's going to require an email here oh that's right you don't need the https you can just just say webflow.com and then i'll go ahead and click save and continue okay so now that i've gone ahead and done that i actually only need to go to credentials i don't need to do anything else here i can just go to credentials and for credentials um i'm gonna basically create an oauth 2.0 client id and i do that by clicking create credentials so i'll go ahead and click that right now and then i'll click oauth client id it's going to ask me for the application type so i'll click application type i'm going to say i'm building a web application but you can obviously select what you you specifically want and then the only other thing that i'm going to need is this authorize redirect uri so uri is like a url but this is basically saying okay as google once i authorize this user where do you want me to send them right so we need basically a webflow page for this i'm going to do this later i'm going to hit create for right now and then it's going to give me a client id and a client secret you should definitely keep this private i'm going to actually delete this after i do this demo so it doesn't matter that you see this but basically this is what you enter in to zano right that's what it's asking for over here when you hit configure so i'm going to go ahead and copy the client id and i'm going to go ahead and paste it here and then i'm going to come back and i'm going to copy this secret and i'm going to paste it here all right so we have everything ready i'm gonna hit update okay so in theory this is ready to go and before i move into the webflow portion of it it's just worth noting that if i go into my api you can see that i have an api group which is basically a collection of api endpoints called google oauth right that zeno installed when i went through that onboarding wizard and there are four endpoints there's continue init login and sign up so specifically what happens is when i go to continue with google oauth there's always some sort of initialization um endpoint that happens and if you click on it you can see that it's calling this function that goes through and does all the heavy lifting for you um but the important thing to note here is that this is what's called first and then you can either log in or sign up the user but we're going to use the continue api endpoint today because continue handles actually both log login and sign up it just says you've probably seen insights like continue with facebook continue with twitter and it will just do the right thing so people don't have to sign up and then log in right it's just one step so these are the two we will use today and we'll come back to this okay so now that this is done let's go ahead and go to the webflow setup i'm going to click webflow right over here and i already have a project that i've started and i'll go to the pages and i'm going to just add a new area and you can however your webflow page is set up you can do this any way that you want but i'm going to create a new folder called oauth okay and i'll hit create okay so now that oauth is created um here it is down here i'm going to go ahead and add two sub pages the first one is gonna be called login so i'll go ahead and hit create and uh the second one i will go ahead and say um my account okay great and i'll hit create all right so now i have these two pages over here so in the login page what i want to do is i i just really need one button so i'll go ahead and put a container here then i'm gonna go ahead and add an element i'll add this button and this button i'm gonna go ahead and center it in this container oh where are you okay so this button i'm gonna say continue with google okay so now that i have that there what i actually wanna do is i wanna go through and i wanna change the id here right because that i'm gonna basically use javascript to uh call this button but for right now actually what i want to do i want to leave it as is and i want to go through and i want to go to my account this page specifically so what i want to do here is i want to do just another container and um we'll do a couple things here uh we'll go ahead and we will add a piece of text or a heading right and i'll just say um welcome to your account right this is going to be the logged in page and then the next thing that i want to do i want to add just like two more divs um and i'll add one here and uh this is gonna display let's let's say this displays the email address of the person logged in and then and what i did was here you in the settings thing i i change the id to email and we're going to leverage that later um and then i'll go ahead and add another div and i will do uh full name or just name is fine oops let's not let's just put it all within each other there we go and we'll do name okay so to be clear i just said welcome and i'll actually put these in the container i'm never good at this so you'll have to forgive me here i'm going to move this up there there we go welcome to your account and then this one i want to populate i didn't know why that changed with email and this one i want to populate with a name okay so again if i go here i have my um i've got my login screen which is continue with google and i'll actually let me do the id now this is just called off button right i'm going to call this with javascript when you click here we're going to initiate that oauth using that endpoint then what we're going to go ahead and do is in after you've uh initiated you're going to go to my account here in my account we're going to say welcome to your account and we're going to display the email address and the name and actually let's do one more thing let's do a logout button okay and we'll just do that as a piece of text sorry i'm definitely not a web flow expert i think it's just that and i'll just say log out okay and then what we'll do is we'll call this log out and then when someone clicks this um they'll be able to log out okay so anyways there's the log out text we have everything that we need here in um in webflow now let's go to the javascript and talk about what's happening so just to be clear if i didn't make this clear before anytime you want to do any sort of web application type thing within webflow you just need javascript to make it work so what i'm going to try to do is walk through this javascript just like i have with the other videos tell you what's going on and then give you a link so you can actually use it yourself so the first like lines one through six are basically variables that you define that are used later on in this javascript file okay the first is the login path and this is the specific path that the user gets sent to if they are not authenticated or and that's a webflow uh path the redirect uri remember we were talking about is the same url that the google service was asking for that says hey look once the user is actually authenticated where do you want to send them so the difference between the two the login path is when they're not authenticated where should they go to log in and then the redirect uri is once they are logged in where do we send them and that is a full uh webflow url okay line three this oauth init url is basically the initialization of the oauth so if we go back to zano it's this end point right here google uh oauth google in it and that's what you take that endpoint from here and then the continue url is what happens when you want to go to zano and remember we mentioned we're going to use the continue rather than the login and sign up because it handles both cases lines 5 and 6 are additional headers or response in the form that you can send along with the payload but we're not going to use that today it's just there in case you want to fill it out and send it in through the login response so really these top four are the ones that we are going to use so let's go ahead and fill this out right now so first of all i need the path to log in and so if i go back to webflow right over here i can see that if i go to my page and i click here or sorry i go to my settings i can see the path is slash oauth right and then if i go if i expand this and i look in that page um it's slash oauth login that's where i want to send users okay so that's what i'm going to do here so i'm going to say slash oauth slash login okay great so that's my login page the redirect uri where your webflow users are redirected after the login well we're gonna have to get the whole url here why because google needs to access it so i can't do a relative path like i do here i have to do the whole thing so what i'm going to do is i'm going to go ahead and just publish this right now and then what i'll do is i'll just take this whole url which is wmx 0cxe whatever webflow.io so let me let's go ahead and do that this is where i want but i actually don't want the um the login screen let's go ahead and go to the account screen so i'm going to close this i'm going to click on the my account screen over here um and then i'll click that this is the screen that i want to send people to so i'm going to update date this now here in this code right so this is going to be over here and now that i have this i can actually also update it in the credentials so remember if i click this pencil button on oauth web client id this is what i just created i'm going to go to this authorized redirect uri that's why we're saying google it's okay to send people here right so i'm gonna go ahead and hit save so now google has permission to send people there after uh they're logged in so let's go back here so that's done the init url we go to zano and we copy the initialization url and i'll paste it here and then finally the continue url because that handles both cases is right over here okay great we have everything that we need so let me actually try to just very quickly take you through the javascript feel free to skip this if you don't care but i think it's always just important to kind of know what's going on so this function over here is initialize oauth this is the function that calls the zano back end that then communicates with google and logs someone in so it's basically going through it's it's um looking for the url for this uh in it right so remember it's that's basically what uh url it's calling it's then after uh it's logged in it's basically taking that uh redirect uri and it's sending people there after they're logged in so fetch is just a way to basically get an api call and if it's successful it's storing everything in this res and res is like results or response right and it's formatting it in json so this is the important part res because if everything happens correctly it's stored in that variable and you'll see us mention it or sorry access it a couple times um so how do you how do you actually initialize this init oauth function well um you use it you do a button right this button uh is called auth button on the page so remember in webflow if i go to the page login over here you can see that there's a continue with google button and i did that id as auth button okay so if i click back over here you can see that it's this document.queryselector is looking for an element on the page or an id on the page called auth button if that button is clicked then it's going to init oauth which is it initialized this whole thing over here okay then there's a logout button right and that log out button initializes the logout function which is further down the page okay and that logout button is on this page over here on my account uh so it's log out okay great so now that that's done um let me go a little bit further okay so on on page load because this javascript handles a number of different use cases what we're saying is always check to see if there's a code in the url parameter so what is the code it's that limited access token that comes from the oauth service so in google once i give it permission to log in it sends that code or a limited access token along and we get it from the url right so it basically appends to the url and we basically capture it and authenticate the user that way and then we um we go into the my account page um and it's actually not my account so actually what are we calling it right now we are calling it i see we just want to make sure we have the right page it's just called my account without the dash so anywhere you see this you can you can update it so my account is what the page is called okay um so it's good that we're going through this javascript and then so this function right over here is continue with the oauth this basically takes that code from the url that i just mentioned above and it then deletes it in the url so for good hygiene and for security we don't want it always be to be persistent that code we want to remove it from that url bar and that's what these lines are doing um what else is important here um so this is basically uh this save token we're saying that this specific function takes the authenticated user and it stores it in local storage so how do we know for example after a user logs in with google that they're logged in for a long time and they can access restricted pages this is how we store their authentication in local storage using that rest remember res response we basically store everything in that response in local storage then this basically update the off state like every time there's an update we pop an alert which you can easily remove right you can just get rid of it if you don't want to see a pop-up every time you sign in but this basically says response.name that's going to say the name of the person logging in just for debugging purposes right then what we're going to do is we're going to update the element on the page if we find uh id called name we're going to update it with the person's name and if we find an id with email we're going to update the person's email so if we go to this webflow over here on the my account page remember we have two divs email and name okay so that's what it's going to populate response.name and response.email okay um and then right over here we're populating this uh inner html with this function over here and then when you log out specifically using this button right over here what we're going to do is we're actually getting rid of the local storage that authorization token and then we're reloading the window okay so i know that's high level if you've never worked with javascript before it may be complex but i thought it was helpful to go through javascript is really just a series of functions and ways to execute on the function right so in it oauth for example that's a function it doesn't do anything in itself but this button right is an event listener on click it fires this function off right so that's just kind of uh any javascript file typically is defined this way so now with all of that there and um remember we changed that from my dash account to my account because that's what i have it on the page i think we're ready to go so i'm going to go ahead and copy this whole thing right over here and i'm going to actually put it in the login page at the bottom and i want to make sure that it's between script tags because we're telling webflow we're using javascript right i'll go ahead and paste it there that looks good and then i'm gonna do the same thing with my account i click on the gear icon i go down to the bottom and i use the script tag okay and then that's done now you definitely could add this to the project javascript settings there's other things you need to do to keep this demo very simple i'm just going to put it on every page that i want to log in and have the user have access to okay so i'm going to go ahead and publish it on this side okay so now that this is published and i'll go to that page in a second uh let me just go ahead and recap what we've done over here we have installed the google os service here in zano we've added a project in google cloud and we've gotten the client id and the client secret and we've updated that we then use these two endpoints in this javascript right and we've configured webflow and we've added two simple pages one where the user can continue with google and log in right and the other is if they're logged in it basically goes to their account all of this information is stored in local storage and then when you log out it clears it all right so if i've done everything right then this should just work so fingers crossed so i'm gonna go to login right now and i'm gonna go to uh i already published it a few seconds ago so let's just go ahead and check it out so it says hi prakash chandran uh that's because i was testing before and it's already me logged in and just so you can actually see in local storage i'm going to hit inspect i'll click on application you can see this auth is here right i can actually just get rid of this like i can just delete this right here and so now i'm not going to be logged in so if i log in again you see how it doesn't pop a high precaution that's where local storage is stored so let's go ahead and click continue with google and see what happens so i'm right now my precaution zano dot account that's the one i'm off with with google so i'm gonna click uh continue with google now you're gonna see that it's saying okay you wanna um what account you want to continue with so it's any google account that you want you could i could always click use another account i'm gonna go ahead and say uh prakash.google.com it says hyper cost children this says okay and when i say okay you can see that the email is populated and my name is populated here okay uh so i'm going to copy this right over here and i'll show you something so right now i'm logged in i can access this page but i'm going to go ahead and log out and remember now takes me to that login page now if i enter this again my account notice how it kicks me back over here because we're not detecting that authentication token in local storage again i'll show you again it kicked me back here i can only access it through um continuing with google and now i'm now i'm here so any page that javascript is on it's going to basically check for that local storage token and then you can log out directly over here okay so hopefully this was a good primer into how oauth works what it is how you set it up in zano and how you then get it working in webflow um feel free to leave comments below if you have any questions at all we're trying to do more videos like this where it's like one part educational and then walking you through everything the there's more uh links below with how you can do things with webflow and zano and we will also include this code um so you can just copy and paste it and just fill out the variables above so again thank you again for watching and we will see you in the next video

Channel: Xano

Views: 5,152

Keywords:

Id: rSW0sji5EWw

Length: 30min 8sec (1808 seconds)

Published: Mon Feb 21 2022