Professional Authentication System with Descope in Python Flask

Key Takeaways

what is going on guys welcome back in this video today we're going to learn how to build a professional authentication system for our web application using D scope so let us get right into it [Music] all right so we're going to build a web application in this video today that uses react for its front-end python flask for the back end and D scope for the authentication system now d-scope is the sponsor of this video today they basically have this platform where you can easily but also professionally design authentication systems and then you can easily integrate them into react in the front end into python flask in the back end without any problems and this is what we're going to do in this video today everything I do here is free you don't have to pay any money you don't have to sign up for any subscription model if you want to follow along with this video you can see here when you go to their pricing page they have this free forever tier which is exactly what I'm going to use in this video today I don't have any special account I'm going to use this same tier that you can use here without paying any money so if you want to get started with that just go to dscope.com and here we're going to sign up for a new account now in my case I already have an account all I'm going to do is I'm going to sign into that account the signup process is very trivial you can just use a Google account again GitHub account and you're already in once you're logged in you will see this developer D scope console here and what we want to do here is we want to go to getting started and we want to create a new application or a new authentication system the first question is who uses your application let's go for consumers then which authentication methods do you want to use now we can use multiple here I'm going to just go with a simple social login and then when I click next it's going to ask which method do you want to use for multi-factor authentication and here I can choose a secondary method now maybe a one-time password in OTP and then I can see here what's going to be created so I'm going to just click next it's going it's going to generate the flows and here now you can see the different flows sign in sign up sign up or sign in of course if you have multiple authentication methods you're going to see multiple of those for example Biometrics or something um and you can explore this here now in the sample app we can click then on customize I'm not going to do anything here uh there are countless customization options here that you can see we're going to focus on the integration into react and into python flask but what I want to show you here first is how easily and how intuitively you can actually change the flows of the authentication so we can go here to flows in the left sidebar and we can click for example on sign up or sign in which is one flow I can click on this and you can see here now we have this mind map like structure where we basically have the starting point of the process of the workflow and then you can see exactly what happens we see a welcome screen we have the oauth then it's asking is this a new user yes or not yes or no and then depending on what the result of this is we have different branches here of this flow so for example if it's an existing user we want to calculate the risk so is this a risky a suspicious Behavior if it's high risk do something else if it's low risk do something else so if it's high risk here we're on we're doing the multi-factor authentication so we're sending an SMS we're verifying this one-time password we're verifying the code and then we move on to the process now I can also and this is the good thing now about this flow type of thing here in D scope if I want to always go for the one-time password I can just take this connection here I can delete it and I can drag it up here so in this case oh like this in this case now what happens is no matter what the risk is if it's an existing User it's always going to ask for the one-time password and I can I can change you whatever I want I can move things around I can change connections and I can design the workflow so I'm going to remove this here again and I'm going to connect it directly to the login actually I need to connect connect it to the end oh moving it now there you go so I'm going to pick this connect it to the end but I can adjust adjust this and change this however I like to get a custom workflow without having to program anything yet so I can just move these boxes and add boxes and change boxes to get the flow I want once I have this I can start with the um basically with the integration into the front end and with the integration into the back end now uh for this video in particular d-scope has provided me with a GitHub repository of a sample application so if you don't want to code anything you can just uh get into D scope create your account do whatever you want and then you can just download this repository you have to set it up properly but basically that's it and you have your flask backend and your react front end running and interacting together if you don't want to do any of the coding now we're going to actually do that for the react client because my channel is focused on backend python data science machine learning not so much in front end I'm not very experienced with it and I think most of you guys are probably not interested in react but we're still going to look at the code and explain or I'm going to explain what's happening here so what I want to do is I want to download the zip file for this repository just to get the react code I'm going to save it on the desktop I'm going to open this and I'm going to unpack the react client I'm not going to I'm not going to unpack the python file because or the python server because this is what we're going to do ourselves but what we're going to do now is we want to open up a command line I also already have this development environment set up here I want to create a new directory inside of my working directory that I'm going to call frontend and then what I want to do or actually I'm going to do it differently I'm going to remove that again I'm going to open up the command line I'm going to navigate to the programming directory and here now I want to say create Dash react Dash app front end or I think do I need to say npx create app I think so yeah npx create app create react app front-end so of course for this you're going to have you're going to need to have npm installed npx installed so the full front end front-end thing but this is just some basic installation stuff that you need to take care of what we want to do then is we want to install the Disco package so there is a development kit for d-scope that we're going to have to install in our project I'm going to skip this installation here I'm going to come back to you once it's done all right so the installation is now done what we're going to do next is we're going to go into that front-end directory and we're going to install using npm so npm install dash dash safe at d-scope slash react Dash SDK this is going to install what we need in order to use D scope in our in our react front end and if you need some help with the setup you can also go to the uh to the D scope quick start guide you will find a link in the description down below of course you can just go here to client sdk's web client then social login and then you can see everything that you need here now one thing that's very awesome here is that your project ID that you need to specify basically your authentication ID or key if you want is already part of the documentation if you're logged in so if I'm logged in right now or because I'm logged in right now I can see here in the documentation my correct key this is not a sample key this is what I have to enter into the project to make it work so um I can just copy this here and then I'm going to go into python the installation is hopefully done now and what I want to do now is we want to replace the code of our newly created app with the code from the repository that you will find in the description down below um so where did I save it let me go to the desktop I think there you go our react client source and then app .js index.js open it up in Notepad and here now we're just going to copy this is now the index.js so we're going to just copy this here I'm going to paste it here and we're going to also have to import auth Provider from this react SDK the rest stays the same and for the app we're going to go into app.js and we're going to uh basically what do we have to replace almost everything right so I'm going to just copy all of this here until the point where did I start I started with curly bracket so I'm going to copy all of this here I'm going to replace this and the basic idea here and we need also some imports first so we're going to import these three things here as well you just copy paste from the file essentially unless you want to build it from scratch then you can look into documentation and do it the way you like but essentially what we're doing here is we're connecting um to the back end um this is going to be our flask backend and we're passing the bearer token and we get this token by authenticating ourselves here in the front end so you can basically just clone the react app and use it to connect to the python app I'm going to show you what this looks like here I'm going to just run this using npm start and this should start the react application and in this react application you can see here you're not not logged in one thing that I forgot to do is I need to provide a project ID because otherwise it doesn't connect to my project so I'm going to let me just copy it again from the documentation I'm going to copy this project ID of course you have to copy your project ID so there you go and also I think do I have to put it here I think not so let's just see if this already works so now it works you can see we have this react app that says you're not logged in um and I can continue with Google I can just pick neural 9 here and now you can see Hello neural 9 my private component and I can fetch private information but since we don't have uh the flask server running it this doesn't work yet so this is the next thing that we want to do we want to build the flask server this is now the front end I can also log out I can log in again there you go so you can see this works um so let me just move this here to the second screen so I have my prepared code here and what we want to do now is we want to create a second directory called back end and here we want to implement a basic python flask server so I'm going to say app.py we're going to open up a command line we're going to install if you don't have it yet flask we're going to also install flask cross origin request so of course and we're going to also install d-scope I think dscope is the package for python let me just see in the documentation if that's the case here we have now backend SDK SD case social login and dscope is the package yes so once we have all this installed we can build a simple flask server or a flask application so we're going to say from flask import flask with a capital f jsonify request make response then from flask cross origin request we want to import the cross origin request um and then from D scope d-scope we want to import refresh session token name session token name and d-scope client so I'm going to zoom out so that my camera is not blocking the code those are the Imports and what we're going to do next is we're going to say app equals flask with underscore underscore name underscore underscore and then we're going to say that cross origin requests are going to be allowed by calling course on app and then we're going to have just a simple public endpoint that we don't need authentication for so I'm going to just say def index and here we're going to just return hello world this is public information and then we're going to say app Dot route as a decorator above it to say that this is the default path so if you just go to the basic server without specifying any custom path this is what you're going to get here uh now we also want to have a protected a protected section so we want to say Here app dot route and want to call this for example here protect it the methods that we want to allow here are get um we want to say here protected underscore assets for example and we want to get the session token so we want to say session token equals whatever we get from the request so remember in our front end when we go to the front-end section here again in our app.js we're sending a request to localhost slash protect it so this is the end point here in flask that we're targeting and from this request we want to now get the authorization so we want to say request dot headers I want to get the authorization want to split it on white spaces and we want to get the second element to get the actual token and now what want to do is we want to try to actually see if that token is valid by saying D scope client equals d-scope client the project ID is going to be still the same project ID and then we're going to say JWT so I think it was Java web token or Json web token I'm not sure uh response equals dscope client dot validate session and the session token is going to be the session token so we basically authenticate we we see if the token that is provided in the request is actually valid and if yes we're going to print successful validation and we're going to provide a response the response is going to be make response we're going to jsonify some secret information here actually we have too many parentheses here jsonify we're going to have a message and the message is going to point to um to a secret code D scope rocks like this all right and then we also want to provide here maybe some stuff like severity severity of this message is uh I don't know Danger all right so this is the response and uh we also want to have a code in here which is going to be the HTTP code 200 indicating that everything went right um and then we also want to have an accept block but before the accept block we actually want to return this uh response so we want to first set the response header content type is going to be application slash Json and then we want to return this response here now for the exception if it doesn't work well so if the if the actual um if the actual authentication process does not work well what we want to do here is we want to say print validation failed and we want to say response equals make response we're going to again jsonify the whole thing we're going to have a message the message this time is going to be not allowed and then we're going to say again severity is going to be Danger and the code this time is going to be 401 because this time we are not allowing the axis and then we can copy basically these two lines and that is when we indent this properly that is basically it we have this simple public endpoint we have this protected endpoint we get the token from the request header we um try to validate it if it works we return The Secret Message otherwise we return not allowed and all we need to do now is we need to say if underscore underscore name equals underscore underscore Main underscore underscore then we're going to say app dot run on Port 8080. so we can run this now and I think we still have what's the problem here module lip has no openness is selling all algorithms okay it seems like for some reason I have to downgrade the cryptography package by saying pip install cryptography equal to 38.0.4 uh if that fixes the problem that would be great let's see if that works um and now let's restart this again probably there is a dependency issue but now it works there you go we have this localhost this is the public information if I just go to slash protect it you're going to see that I don't have even an authorization here so this fails immediately but if I go now into my front end application I'm logged in I can fetch the private information you can see here secret code D scope rocks now if I log out I don't even have the possibility to send a request but I would not be authorized to do it so if I go again continue log into neural 9. they go locked in Fetch private information secret code D scope rocks because my authentication my front-end application is sending the authentication token to the back end to backend is then confirming the validity validating the session actually we don't need this return value by the way because the thing is that this validates session function uh raises an exception if it goes wrong so if it cannot validate the session it's going to raise an exception which is why we end up being here but if everything works fine we're going to get this response here with the secret code D scope rocks so that's it for today's video I hope you enjoyed it and hope you learned something if so let me know by hitting a like button and leaving a comment in the comment section down below and of course don't forget to check out the scope the sponsor of this video you will find them at the link in the description down below uh make sure to visit them make sure to try out their product and of course don't forget to subscribe to this Channel and hit the notification Bell to not miss a single future video for free other than that thank you much for watching see you in the next video and bye [Music] thank you