Secure Your App with Advanced OAuth Authentication | Multiple Provider Methods

Key Takeaways

in this video we are going to see how we can add authentication to a flask app using different providers we are going to create a fully functional flask O app and we'll see how authentication can be incorporated in your existing flas Gab by creating certain endpoints we'll see how login with GitHub works we'll see how login with Google works and even if you want your users to login through another service I'll show you how that is done so let's move on to a computer screen and let's get started so as you can see I'm in my Leno account and I'll get started by creating a linode if you want to follow along with this video and you want to do what I'm doing in this video you can grab the link in the description and sign up on cloud. lot.com this will give you $100 60-day credit and it is great for trying out these apps so go to the description grab the link and sign up on lenoe and yes then you can follow along so I'll click on Create lenoe and I'm going to create a machine to host my flask app because we definitely need a server back end if we want to create an au app so I'm going to choose a location which is near me and I'm going to use 122 24.01 LTS let's go for dedicated 8gbs and then I'm going to label this Lode as o flask app and you can give any label of your choice so the thing is if you have a lot of VPS running in your account you know which VPS is which and let's add some tags so let's select a root password and then we'll simply create this lodde so let's click create lodde and I'll wait for this to provision so now I've created this folder flask O app linode and let's open this folder in VSS code and I'm going to create a bare minimum flas cap structure so I'll say main.py there is a file called main.py then we'll create a folder called Static and let me call it static and then templates this is bare minimum flask cap let's go to flask documentation and I'm going to grab the minimal flask app so let's copy this minimal application and let's try to run it so let's copy this minimal application and I'll say app.run debug is equal to true and if I run this application you'll see that the development server is running if you don't have python installed make sure that you have python installed and also make sure that you have flask installed so in order to install flask you'll have to run a command like this pip install flask and this is going to install flask on your machine I I hope that you'll do this so let's have a look at our app it says hello board which is great so let's now host our app to our Akamai account so I'll search for filezilla and I'll upload all the files and file Zilla and before that what I'll do is I will go to my terminal and I will log to my arami VPS so let's copy this and let me paste this here yes I'm logged into my machine and I'm going to upload all the files I can simply drag and drop so let's upload these files but before that I'll have to log into my file Zilla so let's copy the IP address which will be the host then username root and then Port will be 22 and let's click on Quick Connect okay and yes I have connected so let's go to slome and I'm going to create a folder here called FL cap so create a directory flas capap and inside the flas cap I'm going to upload all these files so let's upload these files I'll wait for this upload to finish now let's go to CD /home and then CD flas cap and then let's run Python 3 main.py and it says no module name flask so pip 3 install flask and it says app install Python 3 pip is something that I need to run no worries I'll install it and I'm waiting I'm waiting and once it's finished I'm going to run Python 3 main.py to start my flask app it's taking a bit of time but let's wait for it so I'm running APD install Python 3 flask to install flask and then I'll also install request by typing APD install pyth Pyon 3 request and now let's run this Python 3 main.py and the server is working I will change this to 0.0.0.0 5000 so that we can access it so I'll say host is equal to 0.0.0.0 and debug is equal to true and let's now run main.py so I'll say Python 3 main.py and yeah this is working now what I want to do here is I want to create an O page and then I want to be able to click on login and sign up and provide options to user for logging in and signing into my app so I'm going to uh import render template so uh from flask import flask and render template and we are going to render template and let's say uh index.html and I'll create this template index.html and let's get started by creating this index.html login via GitHub and Google and maybe using uh username and password as well so I'll have two buttons here login via Google and then I'll have another button here which will be log in Via GitHub and we'll figure out how these buttons will be um made working okay I'll also add a CSS so I'll say Style do CSS and let's link this stylesheet style. CSS great so we have two buttons we have styles and let's add a container and then we are going to add some very basic Styles this is not a styling tutorial so don't expect a lot with the Styles but again we are going to give uh some basic Styles okay all right so we have a Max width say ADW at VW uh and let's do margin Auto 45 pixels Auto and let me see how this app looks now okay so we have login via Google login via GitHub and I'll also have to give size to my container so let me add height to my container 30 VH and if I refresh nothing happens let me check what's wrong did I even add CSS to this page I think CSS is added so so it says style.css is not there uh let's add SL static style.css and yeah this should be working so we have two buttons you can style these buttons login via Google login via GitHub the moment you click login via Google it should be able to log you in via Google and the moment you click log in Via GitHub it should be able to log you in Via GitHub so I'll go to github.com I'll go to settings and every authentication Service has a way for de developers to add the authentication via that service so I'll show you how this works we'll go to oo apps let's create a new oo app I'm going to call it ai ai the homepage is going to be Local Host for now so I'll copy this for now and I don't want to add app description but the call back URL is going to be uh GitHub sl/ GitHub okay so I want to make sure that I note down this URL somewhere so this is the URL that I've given for call back now let's register the application okay so we have a username and we can actually add a client secret as well so client ID is this is client ID client ID is this and then we have client secret so let's set client secret okay this is client secret I have to generate it so let's generate it let's get a new client secret okay it's asking for password let's put the password in and yeah so this is how my GitHub app is going to work okay amazing I'll show you how to actually make it work but for now let's update this application so we have generated some tokens and we have updated this application now if you look into the documentation you'll see that all you need to do is you need to make your user visit this URL along with these query perms so if I develop the URL will look something like this so what I'll do is I'll come back to my index.html template and I'll simply say link so let let me let me add a link e anchor tag HF is equal to https github.com log o/ authorize and then we'll add in the client ID and then state is a random string so I'm just giving a random string let me let me give this random string and then what I'll do is I will wrap this around the button and let's see if this works so let's refresh let me see if my app is running so my app is not running I'll have to run it again and now if I reload it works so let me click on login via Google in fact I should wrap this around login via GitHub and not around Google so let me make it GitHub and this one will make Google but yeah if I click on authorized code with Harry you'll see that this redirects me to my app sl/ GitHub and it gives me a code now this code contains information about whether I'm logged in or not so if you see here users are redirected back to your site by GitHub and there is something called a code and this code is something that you need to pass back to GitHub as a post request so you'll have to make a post request to this endpoint along with all this information and then what you are going to do is get this information in return so by default the response takes the following form and you get an exess token you get a scope and then you get a token type now once you have this exess token you can always use a get request https api. github.com user and you can add a beer authentication token so in order to save time what I've done is I have actually completed this app to handle the GitHub login let me explain what is happening here so what happens is an index.html is rendered the moment you go to 127.0.0.1 uh colon 5000 now if you click login via giup button what happens is that you are directed to this URL which has your client ID your personal client ID now once you do this what happens is GitHub asks you to authorize your application and if you authorize your application what will happen is it will redirect you to this endpoint sl/ GitHub why exactly to this end point because we have given this as the call back URL now what happens is we take the code and we take the state which is a string that we passed and now what we do is we say if we get a code what we do is we make a post request to this URL to get the access token now we can get the access token if client ID and client secret are correct and also if the code is correct okay now what we can do is take this access token and then retrieve the user information let me remove this render template now what happens is if the user info is correct we can use this function to get access token this function is really very simple this is making a post request to this endpoint with the authorization token and then it is returning the response as Json and now once you click login via GitHub it will ask me to authorize code with Harry app and then I'm redirected to my uh application and I can get all the information about me as you can see which is great now in a very similar way I'm going to add Google logins so I'll search for Google Google Cloud oo consent screen and then what I'll do is I'll go to this page and I'll go to O consent screen page because this is something that I want and after that what I'll do is I'll create an app so you have to select a project and then you have to create an app so let's create uh a project so I'll simply create a project and I'll name it as akami AK a m AI login and let's click on create now my my login project has been created and now what I can do is I'll wait for it to finish and now I'll select this project because I want to work in this project now I have this credentials menu I'll come to this o consent screen and I'll say this app is external then I'll click on create the app name is going to be akami login demo or let me call it cwh login app this is something that you can call your app and support email I'm putting as my email authorized domains which domains are authorized to use this so let's add the Local Host colon 5,000 as a domain let's put in the application homepage as Local Host colon 5000 let me call it Local Host colon 5000 and then we can add the developer email and click save and continue now I'm going to add or remove Scopes so I'll say that I want to see the email and also I want to get the personal information I think that's all I need to do I'll also select the open ID and I'll click on update and save and continue and then I'm going to add a test user so I'll add myself as a test user click on ADD and then save and continue and after you are done doing this you can actually go back to dashboard and then you can create credentials so we are going to create credentials and we are going to create credentials and then o client ID application type is going to be web application and authorize JavaScript Origins uh is going to be Local Host colon 5000 and it should not end with a slash okay let me add Local Host as well and authorized redirect uis so this is going to be SL callback SLG gooogle okay let me note this down so that we have this route configured for Google okay let's click on Create and yes o credentials have been created let me copy my client ID and my client secret so this is my client ID and this is my client secret obviously I'm going to delete this so it is not going to work for you but yeah if you want to try this out make sure that you create your own credentials now let's test this out I have finished all the code I'm testing this out and yeah this works so what I've actually done is let me show you what I've done I've created an App route //g gooogle where what I'm doing is I'm taking all the data and after receiving the data I am getting the credential from the data and this credential can be decoded and since Google Au uses jwds by default what you'll have to do is you can decode this JWT and then see the response so you'll have to install a library called Pi JWT which I'm using and it's pretty simple and straightforward and you can implement this uh in the text stch of your choice as you want now what we can do is we can go to our aami server and we can update this hosted flas capab there and once you have updated the app you will be able to see this app in action in your dashboard one really important point to be noted is that if you are using a domain or if you are using a server you'll have to change or add the JavaScript origin as your IP address of the server or the domain that you are using and you should be good to go now in order to make this app working what I'll do is I'll come to my oo home URL and change my o o home URL to this one and then I'll do the same with this as well and I'll upad my application I'll also do the same with Google Cloud so I'll log into my Google account and I'll come back to O consent screen and I'm going to update the URLs I'll edit this app and I'll change the application homepage to this let's click save and continue and I will do the same with other URLs as well I think we should be good now back to dashboard now if I click on login via GitHub you can see that I able to login via GitHub and I cannot log in via Google because I'm not using an https so you need to add a domain and follow these same steps if you want to sign in with Google so I hope that this video was helpful and you were able to understand how authentication can be done using flask it's really very straightforward all the different providers like Google GitHub LinkedIn and Twitter have different ways to authenticate users and you just have to dig in the documentation and get the job done in the text tag of your choice so I hope this video was helpful thank you so much guys for watching this video and I will see you next time [Music]