Skip to main content

Authentication Finesse

 Authentication Finesse

So far, we've used Replit authentication as a bit of a bully. It's forced users to authenticate on every page.


For a blog engine, this will probably put users off. We want them to be able to read your online literary genius without being turned off by having to create an account and login.


Today is all about finessing the Replit authenticator so that it works in a more subtle way.


Custom Buttons

To start, I've turned on the authenticator from the files panel and then select or use a prebuilt login page. Make sure you do this before you write any code!


👉 This time though, I've clicked the use your own custom button link.



 Now I've got some lovely code snippets to steal work with.


Add an HTML template

👉 Next I add in a HTML template page where the button will appear. The page is called page.html and can be found in your file tree. Here's the code:

<html>

  <head>

    <title>My Website</title>

  </head>


  <body>

    <h1>Here's my site</h1>

    <p>Everyone can read this.</p>

  </body>  

</html>


 And we read that page into our main.py Flask code too:


from flask import Flask


app = Flask(__name__)


@app.route('/')

def index():

  page = ""

  f = open("page.html", "r")

  page = f.read()

  f.close()

  return page



app.run(host='0.0.0.0', port=81)


Edit page.html

👉 Let's add the authentication. To do this, I'm editing the page.html file.


I used the auto add HTML package button in the authentication panel and moved the code into the header.

I used the Insert Custom Button option to add the button code to the body.

Here's the code to update in page.html:


<html>

  <head>

    <title>My Website</title>

    <script src="https://replit.com/public/js/repl-auth-v2.js"></script>

  </head>

  

  <body>

    <h1>Here's my site</h1>

    <p>Everyone can read this.</p>

    

    <button onclick="LoginWithReplit()"> Login </button>

  </body> 

</html>


Stopping the code and re-running it will show you the login button on your page.


Build a 'hello' page

👉 Now, let's build a quick 'hello' page that we can redirect a recognized user to.


Add the necessary imports from flask import Flask, request, redirect.

Check for a recognized user (in the index subroutine) and redirect if they are recognized:


def index():

  if request.headers["X-Replit-User-Name"]:

    return redirect("/hi")`


Build a quick hi page that displays the username:


@app.route("/hi")

def hi():

  page = ""

  page += f"""<h1>{request.headers["X-Replit-User-Name"]}</h1>"""

  return page

Add a quick if that redirects if the user is not logged in. This stops the user from adding /hi directly to the URL to try and bypass the login.

def hi():

  if not request.headers["X-Replit-User-Name"]:

    return redirect("/")


Here's the whole code:

from flask import Flask, request, redirect


app = Flask(__name__)


@app.route('/')

def index():

  if request.headers["X-Replit-User-Name"]:

    return redirect("/hi")


  page = ""

  f = open("page.html", "r")

  page = f.read()

  f.close()

  return page


@app.route("/hi")

def hi():

  if not request.headers["X-Replit-User-Name"]:

    return redirect("/")

  

  page = ""

  page += f"""<h1>{request.headers["X-Replit-User-Name"]}</h1>"""

  return page


app.run(host='0.0.0.0', port=81)


What's the Best Key?

User name might not be the best piece of info to use to identify a user because the user can change this. The thing that's unique that never changes is their user ID - this would be a good piece of info to use as a key because it's unique and permanent for every user.


We can also get information about:


What teams a user belongs to.

Roles (teacher, student, Replit staff etc)

Profile pic

Display The Pic

Yeah, that would be great, wouldn't it. Like a book of faces, a picture book, a face novel....Ok, I'll stop now.


Anyway, let's add the user's profile pic to the hi page:


👉 Here's the whole code:


from flask import Flask, request, redirect


app = Flask(__name__)


@app.route('/')

def index():

  if request.headers["X-Replit-User-Name"]:

    return redirect("/hi")


  page = ""

  f = open("page.html", "r")

  page = f.read()

  f.close()

  return page


@app.route("/hi")

def hi():

  if not request.headers["X-Replit-User-Name"]:

    return redirect("/")

  

  page = ""

  page += f"""<h1>{request.headers["X-Replit-User-Name"]}</h1>"""


  ###### The new bit ##################

  page += f"""<img src="{request.headers["X-Replit-User-Profile-Image"]}" width="200">"""

  

  return page


app.run(host='0.0.0.0', port=81)


Comments

Post a Comment

Popular posts from this blog

ALL ABOUT WHILE LOOP

 WHILE LOOP  A  while  loop allows your code to repeat itself based on a condition you set.   EXAMPLE : counter = 0 while counter < 10:   print(counter)   counter +=1 Infinite Loop  You have to be  really  careful that you don't accidentally invoke an infinite loop! This is where the computer will loop code until the end of time. Without a break. Forever.  This is just saying "count to 10 by 1 each time." to make the loop end. Don't forget, if your  condition  is a  >  then you might need to  -= . This will subtract from the variable instead of adding to it.   EXAMPLE : counter = 0 while counter < 10:   print(counter)    counter += 1
Post a Comment
Read more

WHAT IS ELIF

  What the elif is this? The  elif  command (which stands for 'elseif') allows you to ask 2, 3, 4 or 142 questions using the same input! This command must be in a certain place. You can have as many  elif  statements as you want, but they  must  go in between  if  and  else  and have the same indentation. The  print  statements in your  elif  command need to line up with the indent of the other  print  statements. EXAMPLE :  print("SECURE LOGIN") username = input("Username > ") password = input("Password> ") if username == "mark" and password == "password":  print("Welcome Mark!") elif username == "suzanne":  print("Hey there Suzanne!") else:  print("Go away!") E
Post a Comment
Read more

Automate! Automate!

 Making this customizable 👉So how about making our search user customizable? In the code below, I have: Asked the user to input an artist (line 14) Tidied up their input (line 15) formatted the search URL as an fString that includes the artist (line 19) Here's tAutomate! Automate! We are so close. I can taste it, folks! Massive kudos on getting this far! Today's lesson, however, will work best if you have one of Replit's paid for features (hacker plan or cycles). Free plan Repls 'fall asleep' after a while. Automation kinda relies on the Repl being always on. If you have hacker plan or you've bought some cycles, then you can enable always on in the drop down menu that appears when you click your Repl name (top left).he code: This is important because when our repl is always running, it can keep track of time and schedule events. 👉 I've set up a simple schedule that prints out a clock emoji every couple of seconds. It works like this: Import schedule librar
Post a Comment
Read more