Strapi Authentication Provider - Google

it's up I'm Alexandra nerd in this video I'll show you how to use authentication providers or strap more specifically we will set up Google as an off provider and this process will be very similar for other authentication provider since Google requires a live URL we're gonna use Angharad to turn our local strap install and make it available to the world wide web alternatively you could also deploy your live app for example to a Roku and that will work as well the first thing you'll do is install strapy which you can do by using the command MPX create - scrappy - app then the name of the app in my case strap it - off - demo and then the flag - - QuickStart so that we don't have to do always setting up a database however any 3.0 strapping install will work so if you have a strap installation you should be good to go and now that strap is ready we can tunnel it with and rock so at this point I have my local strap it running I'm you know localhost 157 and I've navigated to an gerak calm I would recommend you do the same and again if strappy is open and basically works we're good to go there's nothing else that we're gonna need to do on the strap aside we just need to have an install running I'm gonna go on and rock I'm gonna click on get started for free you may have to register I've already registered my account for the sake of say meantime and then you can click up here to download your binaries once you have downloaded them you in my case they're gonna be in the downloads folder this should be in a similar folder for you as well then the next thing to do will be to unzip them in my case I can unzip them by just double-clicking on them so I have it here and by clicking on it it's gonna automatically unzip them for me so I have an anger file down here and the next thing that I'll do is there's going to be this command that it's gonna be a little different for for you because you're gonna have your own token so you're gonna need to use this file so I'm gonna open the terminal a new terminal window from from from scratch and we'll navigate to my downloads folder then I'll just copy this command which basically means locally use the angle rock that is locally to the folder in which you're at and then pass this off token parameter which is this code which basically associates my account with my angle rock installation so I'm going to copy it I'm gonna go into terminal I'm gonna paste it I'm gonna run it and it's gonna basically say that this worked that's really all it's gonna do and now we can actually run and rock by just using dot slash and rock and then HTTP and then the port that we want to bind in our case 157 or lead as we like to call it so we can tap dot slash and rock HTTP lead there we go boom now we have a and rock connection so I can try and connect to it and I should see strappy basically if you visit this URL while I'm hosting it Frank Rock you should be able to able to visit my own strapping style as well now that we did that we're ready to set up Google console right we have set up and rock so that we're tunneling our local strapping install let's go ahead and set up our Google developer console so navigate to console dot developers.google.com and you may have to create an account and you may also ask you for billing information however Google offers a free tier so even though you're providing your credit card info you should not be charged for this specific setup at this point you can click up here on the top left to get access to and find all of your projects and then you can click here on the right to create a new project I'm gonna give my project a name in my case I'll just call it strappy off demo and you can tell that I tried these multiple times if you paid attention because I care about you so at this point I'm in the strappy of demo screen and the first thing we need to do is setup it off consent screen and we're gonna set that to a type external which means that anybody can register and one big gotcha when you set this up is do not touch the application logo if you touch the application logo you're gonna need to have your consent screen validated manually by a Google employee which is gonna waste a lot of time so do not touch this but do add the application name in my case against Rafi off demo and then I'm gonna use my authorized domain so I'll just scroll down here and I find the authorized domains and in the authorized domain I'm gonna literally just copy the angle rock domain I'm gonna paste it in one big gotcha here is that you must not specify the protocol and there must be no trailing slash so it's just the the second-level domain then the the top-level domain and then the extension press Enter I'm good to go and net and then I will need to and you are gonna have to actually set up the homepage link privacy policy and Terms of Service and just because this is a toy project I'm not gonna put real links I'm just gonna put the URL Frank Rock because I'm gonna put this down the second I'm done recording the video but you may have to actually put a valid legally binding set of documents that said at this point we've set up our off screens let's set up our off credentials click on credentials in the left then click up here on the blue button create credentials and select off client ID which is the second option set the application type to web and put a name I'm gonna put strap it off and for authorized JavaScript origins we're gonna use strap is URL which is the anger qrl so I'm just gonna copy that again and this time you can leave the HTTP but we have to remove the training slash and for authorized redirect your eyes I'm gonna use the same URL followed up by slash connect slash Google slash callback callback this is an hard-coded value that strappy will use to provide us with the authenticated user object click on save and at this point we created our credentials that we have these two credentials the client ID and the client secret so I'm gonna set them up in stroppy due to a sake of time I'm not gonna use the angular version I'm just gonna go to localhost 137 slash admin otherwise it's gonna be stuck loading for a while once you're inside of strapy you can click on roles and permissions then on providers and then search for Google click on Google enable it and then you have a field called client ID in a field called client secret go on the credentials copy the client ID paste in a client ID field copy the client secret paste that in the client secret field then our redirect URL is currently set up to slash off slash Google slash callback put instead of that put a proper URL so copy the URL from anger Octavio and just add it as a prefix so that way we're gonna be ready reacting to a real complete URL and the reason why I say this is because we're gonna see a bug that I want you to be aware of as soon as we're done with this so I'm gonna click on done and at this point or settings have been saved and the way to connect through Google auth will be to use the angular qrl followed up by slash connect slash Google and this will redirect us to a off screen however you're gonna see this error you know it says authorization error we have a 400 code with a message of invalid request saying that the redirect URI is missing a scheme and is saying slash connect slash Google starts callback the reason why you're getting this error is because strappy for whatever reason uses a parameter called strappy config dot server the URL so the config dot server the URL parameter to determine the current URL which strap is located and as of now that parameter is empty so strappy doesn't actually know where to send us through the callback so that means that whenever we're trying to set up a callback we'll reject it because it's basically using the wrong URL in order to solve this we can open up with Visual Studio code or strappy installation then go in the config folder click on server the GS and then you can add a new entry after line 3 you can add a comma new line type URL and then put in quotes as a string put the anchor Ock URL without the trailing slash then let the server restart and once the server is restarted you can see that in your logs for strappy you're gonna see that the new URL is actually URL that you just pasted in so this point if we try making the same request to our anger our QR l / connect / Google I think I mistyped Google there we go we can now access Google and try logging in and you can see that I get redirected to slash off slash Google slash call back with an ID token and a bunch of data and most importantly my JSON response is my JWT object which will allow me to make a tentacle request inside a stroppy and i also have all of my user data so if I navigate to localhost 157 and click on users you can see that now there is a new user which contains my information so I was successfully able to sign in with Google through this process at this point you successfully set up Google as an authentication provider for stroppy however you may be wondering how to actually use this with a single page application so that's what I'm gonna be showing you as an example now at this point we set up our Google authentication providers in roles and permission to have a redirect URL which is the same as strappy however if we add a single page application hosted somewhere else we could actually point to it so what I'm gonna do is I'm gonna point to an application that I've been working with called HTTP colon slash slash poly dot market you may have a different application at a different URL and so that means that instead of sending us back to the strappy URL / off / Google / call back we will actually be forwarded to this specific URL once the authentication is done and instead of receiving this get response we will actually basically the JSON field with the with the user we actually only receive this query parameter so I'll show you what happens I'm gonna go on the angular qrl which I'm going to just copy again / connect / Google this is step one you basically still linked to that specific URL so that this triggers the login operation then you get the callback and the callback will send you to your own single page application and it will pass all of these info through ID token etc etc so what you can do is you can select all of them and clearly you can do that programmatically but in my case I'm just gonna show you the demo so I'm just gonna select all of them and then I'm going to navigate and let me just paste this this huge object which begins with question mark ID token then I'm gonna add the Angra qrl at the beginning of it and then I'm gonna add a slash and the slash will be followed up so I have the anger qrl / off / google / callback let's try navigating to this no access token [Music] okay so I made a mistake in copying the data you want to make sure you copy all of the data so you know whatever it takes we're gonna scroll through it pretty sure there is a shortcut for this by the way so basically I'm gonna select from the question mark then I'll press shift command and I'll select all of it and I'll try pasting it again and there we go so basically if you can provide those query parameters and then do a get request to slash off slash Google slash callback then you're gonna receive your JWT token and the user information what does this means this means that in your single page application flow you can have a button a links to the slash connect slash Google URL then the user will authenticate through Google and lastly you're gonna send them back by receiving the token you can then use the token to make a get request to your strappy URL slash off slash Google slash callback while providing your access token and that way you successfully set up Google as an authentication provider so there you have it using Google as an authentication provider with strategy please like the video if you've enjoyed it and make sure to subscribe for more and leave a comment telling me which topics you want me to cover next if you want to take your strappy learning even further make sure to check out the complete strappy course available on udemy link in the description thank you for watching and have an amazing day [Music]

Channel: Alex the Entreprenerd

Views: 15,060

Keywords: strapi, stapijs, strapi.js, strapi.io, strapi notes, strapi course, strapi tutorial

Id: vGtVSwpOlsM

Length: 14min 30sec (870 seconds)

Published: Tue Jun 30 2020