Login Screen in streamlit, authentication with MySQL. Part-4

so today we are going to talk about how to create a login screen in streamlit and do the authentication you using your own mysql database so this is how the application looks the first screen shows the login screen so let's put the username password and here you logged in into this the main screen for the application as you can see there's now log out button it's shown and then you can click your start processing and you enter a few things here about your model name version and then you click start processing and do whatever you want to do here is the code where we have just one thing import streamlet and then we are importing login from user we will talk about this file later but as you can see we just created couple of sections one is header where we are saying the stimulate application and then the main section and then the login so we had these two sections defined in this page itself so let's look at the header first in the header as you can see we are putting the title and then we are using the session state to manage and show and hide these two different containers and there are a lot of small nuances are there if you'll not pay attention to that you will spend a lot of time fine tuning and showing and hiding these different regions of the screen which we are calling them here containers so as you know streamlet application they it executes everything from top to bottom we are ignoring the other functions we'll talk about them later but this is what happens it comes to stream it comes to header section and then draws the title and then i look logged in variable in the session state and if it's not there i set it up to false and then say show login page and this is the page show login page is doing this so let's look at the login page now as you can see the login page has a section which is a container why this container is here because we want to show and hide we will talk about it again at the log out time and see how it is used so in the login section i am again checking if logged in in the session state is false which will be false in the first scenario when the page is rendering first time and then it will just show these two text boxes and then you see i have this button logged in button click if it is click then turn it true turn the session state true and that's about it because once it's done true again the whole screen will be redrawn and this time we will not go here because logged in is will be there in the session state it will fall here and then it will show the log out page or the main page right this is what we did now let's look at what happens when we log in so here admin admin is my password and i'm trying to log in i'm clicking this button so you see i clicked and nothing happened it showed the main screen and went back i don't know if you have noticed so i will do it again and this thing will create a lot of issue so you see admin admin i typed i'm clicking it came and went back so this is one issue i have to spend a lot of time to figure it out how to correct it and the reason this is happening because of streamlit behavior it's supposed to render everything from top to bottom so first time when you click this doesn't execute properly it clicked but then it rendered again and in the whole thing behavior as you are seeing the two times i have to click so the fix of this problem for this page to be drawn neatly is that in the st button don't take the response of it and then do anything but use the on click lambda and this is your lucky day because i spend wasted a lot of time figuring this out so what you do you delete all that and remove all that and then you go here and you say on click lambda this you have to do on click lambda but let's do it correct way the way suggested in the streamlit documentation [Music] if you will read the documentation what happened is this lambda get the preference while getting the page drawn so this get executed first so logged in click and we are passing the username and password to this lambda and this is what it is doing so it's so it's same code which was written before but it was not getting the preference while the page was getting drawn so you have to change it to lambda and now as you can see i'm doing the same thing i go and check login pass the username password login basically returns true or false whether the user exists in database or not so in few minutes we'll talk about the login function as you can see now this code is this way and admin admin and then login you see this page came in one click because this lambda got the preference to be drawn so this lambda turns this state session stay true and false accordingly and then the page get drawn and then it shows the right things so as you can see what happens is this logged in click basically check the username password if it's true it turns the session state true and false and then depending on that i show the logged out page and main page which is nothing but these sections so let's look at the main page which is very simple it just uh you know few input screen and there's a button so this is called start processing and when you click it just shows some balloons in fact you can write here whatever you want to do on the page so that query will happen so now what happens when we click log out so as you can see the log out button has also a lambda called log out click why i'm going to lambda again and again because they got the preference so which does nothing but turns the session state into false that when you click log out and then it draws the whole page again and it falls to this if and then and then it shows the login page or main page accordingly so if i click log out it just goes back so this is in a very simple manner this is a login screen and what's happening for the sql mysql there's a one file called here user so it's very simple i get the mysql connector you have to get this pip installed have a config parser so here is your config file it will look exactly like you will have a password and this database name hostname etc there are separate videos where we talk about how to deploy this application to azure and aws i think it's in part two and part three you can take a look at that but here as you can see there's a config file which has all this information now this host and all those things will change in production uh that's why i was mentioning that so just have this config file and in user as you can see there's a one method called login take the username and password and then execute the sql query sql query returns this is what it returns admin admin and one basically one means true or false obviously i'm showing you here username password but it need not be like this you can hash it keep it in the database and compare the hash password so you don't have to have clear text password because remember all this thing is hosted somewhere in cloud it has to be https and otherwise also it's a bad bad idea to keep username password in a plain text in database so do hashing and encrypt all that and here as you can see we are just creating a connection then cursor and then calling the query this is how the query is made execute sql query i stored procedure names and arguments and i'm passing these arguments three it takes username password and then there's out parameter which returns true or false how does my sql look it's like this check user as you can see it's very very simple so this is a quick rundown of the code of how you can build a login screen and authenticate user using mysql

Channel: Masters of Technology

Views: 15,113

Keywords: streamlit, mySql, Login, Session, state, Session state

Id: ydpoMxwWNA8

Length: 10min 14sec (614 seconds)

Published: Tue Apr 19 2022