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

WHAT IS Nesting

 WHAT IS Nesting  Nesting is where we put an  if  statement within an  if  statement using the power of indenting. The second  if  statement within the first  if  statement must be indented and its  print  statement needs to be indented one more time.  EXAMPLE:
Post a Comment
Read more

IF AND ELSE STATEMENT

  If Statements    These statements are a bit like asking a question. You are telling the computer:  if  something is true,  then  do this specific block of code. Double equals ( == ) is asking the computer to compare if these two things are  exactly  the same.  EXAMPLE :  myName = input("What's your name?: ") if myName == "David":  What is else? IF  the condition is  not  met with the  if  statement, then we want the computer to do the  else  part instead. Likewise, if the condition  is  met in the  if  statement, then the  else  bit is ignored by the computer. The  else  statement must be the first thing  unindented  after the  if  statement and in line with it    EXAMPLE :  myName = input("What's your name?: ") if myName == "David":  print("Welcome Dude!")  print("You're just the baldest dude I've ever seen...
Post a Comment
Read more

FOR LOOP , RANGE

  FOR LOOP  A  while  loop is perfect to use when we  don't  know how many times we want the loop to repeat.  If we have an idea of how many times we want the loop to repeat, we can use a  for  loop to loop code in exactly the same way the  while  loop did.  EXAMPLE :  for counter in range(10):   print(counter) RANGE  The  range  function creates a list of numbers in the range you create. If you only give it one number, it will start at  0  and move to a state where the final number is  one less  than the number in the brackets. In this case, the final number would be  9 .  EXAMPLE :  total = 0 for number in range(100) :   total += number   print(total)
Post a Comment
Read more