How to setup Google OAuth in Webflow, Wized and Xano

my name is Alaba Oda on this tutorial today I'm going to show you how to set up Google authentication in wi and Zano where you can log in or sign up with Google like this one so if you have been trying to set up Google in Zano and you've been getting error like this precondition fail or this error duplicate record detected then this video is for you also if you are setting up Google in Zano for the first time this video is also perfectly for you so let's get started we're going to move to Zano so the first thing we are going to do is to install the Google Arts extension so go to Marketplace go to featured user authentification they also o provider but in this case we're using Google so when you get to Google install the instuction I've installed it in this case so install it after installing it you need to configure it so we need this two input from Google the O client ID and the O secret so we will move to CL console. cloud.google.com so when you get to console. cloud.google.com make sure you create a new project I've created one um after that go to API and services okay so the first thing you'll do is to create an O consent screen so I've created one but let me uh take you through how I do that so you give uh the conent screen a name provide a user support email this are nry the app domain so in the authorized domain I input flow.io save and continue scopes I did not provide any scope optional info no optional info so summary so the last thing you will do is make sure you publish it to live so when you create your own it will be in testing so click the publish button so after that create credentials so this where we get the client IDE and the secret so I've created one too so just click here create but let me work you through that so be you'll be ask a redirect URI so redirect URI is the URL of the page where Google will temporarily redirect you to while authorizing you so it could be any page it can be a login page or a blank page any page in this case I've created one so and I give it the URL of authorizing so I'm providing that to Google so just that's the only thing you will provide here then click on Save after that you'll be giv the you'll be given the client ID and the secret so these are the thing we need the client ID and copy that client ID and the secrets by the way this are supposed to be secret or private okay our extension has been configured now so after installing it you'll be given a separate API API Group so this group Google or so inside the group inside that group you have four end point you continue in it log in and sign up okay so the first one we are going to use is the init initialization so this init is one that we initialize um or maybe initiate initiate a sort of communication with Google so we are going to make a request to this endpoint in wh so let's move to whiz so by the way I've designed a front end in in workflow and I've connected it to wh so let's set up the request um yeah let's get started okay the first thing we going to do is to add the app we call it g o or G OD app rest B return copy the let me copy the group based URL copy yeah okay so we set up the app now so let's make a request to that in it I'll call it the name of the request Google in it let me create a folder G OD okay the end points copy the end points so it's a get method of course so we have to supply one parameter the redirect Ur and that will be that direct Ur IAL about earlier this one okay so our request has been set up correctly so let's run it okay you can see um Google return a URL for us this URL is where we want to navigate to after to the request after running the request so that URL is the one that will take us to this page where we select the account to log or sign up with Okay so let's set a trigger let's set an action to trigger this request the inate request so let's go to action inside action I've created a folder call G OD so the trigger will be on this button when it click so I've given it an attribute call Google continue okay so I call the action on click perform in it to be inside G type will be elements and this is the attribute Google continue and that's action will be on event which event click event so when it's click the action should be to perform a request and which request is that in it want to perform in it so we I'm going to set a condition here and that condition will be that don't perform this request when in it is request but perform it when it's not request so it's going to it's only going to perform it if in it has not already been requested I hope that is clear okay so after that the next thing we are going to do is to um navigate to that you URL that was return from Google so we can do that here that will be like an after request in the previous version of which we have something we call after request we can do that here I would like I prefer to do that in a separate action so that will be um navigate after in it g that be on event um request finished which request the init and what do you want to do want to navigate to want to navigate to this URL can see our app has already navigated to that and um let me set a condition condition simple if this is okay it should run that will be true for now so let's let's test this on live site you cannot do that in ways so if we hit the preview button now click on the button okay as you can see we have been uh uh the app has navigated to the URL return from Google okay so um now we have to select an account to sign up with okay remember the redirect URL provided to Google now we have been redirected redirected to it is happening now but now if you check the URL some parameters has been added to it you can see so one of it is code one of the parameter added to the URL is code which we are going to use another request so let's look at other end points in the group there's log there's sign up so after after running the in it sucessfully the user need to either log in or sign up but there's another end point that handles both login and sign up the continue end point so we can use that in place of both the login and the sign up so let's check the end point so inside that endpoint we have to input the code so the code parameter that was returned from Google we are going to supply it here and the redirect URL we are also going to supply that so let's test this end point in s before we run it in wh San has a very beautiful feature of testing end points inside Zano before you publish it before uh test it somewhere else so let's run we going to supply the code let's copy out this and EXT then the redirect here right copy okay let's run now okay so this is the first error I showed you earlier so if you have been trying to set up Google in Z and you you been faced with this error so I'm going to show you how to solve it now um error code has just deny so what you're going to do now you see this code the code return from Google we have to decode it so search for your filter called URL decode apply it to this input so the URL de code filter will de code the code send return from Google save so now we need to get another code that one as expired let's get another code okay copy run on thebug yeah so we are here now our endpoint is working we can log in we can sign up with this Endo now but there's another issue there's another error uh the second error I show you the duplicate uh Zano returning duplicate user detected to you so let me explain let's say for instance um um we have a user this is our database if we refresh we have the one we just uh sign up now let's say we have a user that has already signed up on our app or on our platform and that user did not use the login or sign up with Google function it sign up it signed up using the um the native Ian the custom email and password method method okay let me show you that let's say this user dra let go it did it did not sign up with uh the function log with Google or sign up with Google sign up with uh the custom email and password method so the this user [e-mail] sign up with email and password it did not sign up with Google and now that user want to make use of the functionality of logging in with Google in our app so let's start again so this is the user the user now want to log in with Google okay okay the US want to log in with Google Now okay so now because the user has not signed did not sign up with uh Google when the user first sign up so our end point will return an error that duplicate record detected for that is in this end point this function is only adding user to record so it's like uh a sign up function only like it's only working for sign up you have to add another function database request add edit record so we have to add another function called add or edit record and we going to find that user by email the value will be the one return from the email return from Google this the F will be the user info and that's it so we disable this one then we return this on as user save okay now so we try to run that again try to log in our user again okay so now let's run on okay I think I did not extract the code yeah so as you can see now so we have said that we have solved that problem um our user that did not sign up with uh the sign up with Google function can now log in with log with Google function so if a if a user now sign up with just orinary email and password but later I want to log in with the continue with Google that's how to solve the issue so now there's another issue now there's another problem with what what we just set up let's say if if a new user try to sign up now so let's try let's say new user this user let's sign up this user to wrong okay so if you check our database as you can see the name of that user was not captured in the database as this one was captured the first one we sign up but this one was not captured so let's find a solution to that so we going to set a condition now an if condition if condition that will be if user if user do name to know that's our condition so the end point we check if the username is empty then I'm going to make a datab database request that edit that record of that user find user by by ID user ID so the only we are editing here is the name so we can return this one as anything so now let's say we delete this one and try to sign up this user again I want to sign up that user again okay user has been signed up now let's check the database yeah so now uh the end point is working sucessfully now is getting the name of the user now and also if the user did not initially sign up with Google the user can log in with Google so let's Now set this up in WIS let's set this request open we so first of all going to set up the request call it [Music] continue before be inside the G so the end points so make sure you always publish any changes you make in s the end points so is get method URL parameter we have the [Music] code I have the code come here I will show you something now so this code we supposed to set it up dynamically you know this is going to be changing every time but for the sake of running this in inside whs I'm just going to put a static uh a static fil in it for now redirect URI the value value will be um okay and that's set so if you run the request now you can see this great run sucessfully so let's set a trigger to perform this request let's set an action that will trigger the request so I am going to call it um perform go go [Music] continue it will be an event and that event will be um custom condition and that condition will be so now let's go back to the request this code we are supposed to fetch it dynamically so I'm going to create a parameter Now call code okay so that's what we return here this parameter code the value will be the code parameter that is returned from Google I hope that is clear okay so now Google continue the condition will now be if this code parameter is present and the action will be perform request this request so after performing that request we going to set our [Music] auten need to set our token oh think uh the request has refreshed so let's make the request again inside wh for okay so Rec condition f okay now we have made the request again with a fresh uh code so the only what we need is just this token want to return it inside the cookie okay so after that then navigate navigate to the dashboard return yeah now get to the dashboard so that's it that's how to set up the continue inside of w so now I think the last thing now is just to clear this one out and return the parameter so if you go now to our liveb site everything should be set so let's click the preview continue with Google select an account yeah so that's it if you find this video helpful please like And subscribe for more video about wh and Zano thank you

Channel: Alaba Oduola

Views: 655

Keywords: Wized, Webflow, Xano, Nocode, WebApp, MVP, #OAuth, OAuth2, GoogleOAuth

Id: w4KjFg4gbNE

Length: 32min 6sec (1926 seconds)

Published: Thu Nov 30 2023