Authenticating users with Repl Auth

This tutorial is an expansion of this one written by Mat

To help you authenticate users hassle-free, we have created Repl Auth. This allows you to authenticate users without having to write your own authentication logic or work with databases. You can simply authenticate a user with their Replit account without the need to store secure passwords. It's also faster to set up than something like Google authentication.

In this tutorial, we'll build a basic Flask web application where Replit users can be authenticated with Repl Auth. To show that a user is authenticated, we will display some of their Replit account information back to them.

The main components for this tutorial are:

Python for serverside code.
Flask and Jinja2 for rendering a basic web page where the user can authenticate.
HTML for the web page layout.

Setup

You'll need a Replit account for this tutorial so if you haven't already, head over to the signup page to create an account.

Create a new Python repl and give it a name.

Creating a new repl

Creating the Basic Flask App

Let's build a basic Flask app that will render a simple HTML page where we will add the authentication button and display the user's account details later.

In the main.py file, add the following code:

from flask import Flask, render_template, request

app = Flask('app')

@app.route('/')
def home():
  return render_template('index.html')

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

Above, we have a basic Flask app that will render the index.html page which we will add next.

By default, Flask will check for HTML pages to render within a directory called templates. Create a new folder in the root directory and name it templates. Now create a new file within the templates directory and name it index.html.

Let's add some basic HTML to display Hello, Replit! on the landing page.

Copy the following HTML to the index.html file:

<!DOCTYPE html>
<html>
  <head>
    <title>Repl Auth</title>
  </head>
  <body>
    Hello, Replit!
  </body>
</html>

That's it for the Flask app. Run the code and you should see the browser window display 'Hello, Replit!'.

Hello Replit

The Authentication Script

To add authentication to our Flask app, add the following within the body of the index.html page:

<div>
  <script
    authed="location.reload()"
    src="https://auth.util.repl.co/script.js"
  ></script>
</div>

This script can be placed anywhere in the document body and will create an iframe within its parent element. Additionally, any JavaScript placed in the authed attribute will be executed when the user finishes authenticating. Currently, our app will just reload once the user authenticates.

If we run our application now, we'll see a Login with Replit button.

If you click the button, an authorization window will pop up with Let (your site url) know who you are?, a profile summary and an Authorize button. Clicking the button doesn't do anything at this stage; we'll add some functionality next.

Replit authentication window

Retrieving Information from the Authenticated Account

We can retrieve the user's data by requesting information from the Replit specific headers and extracting data from them. The headers we want for this tutorial are X-Replit-User-Id, X-Replit-User-Name and X-Replit-User-Roles.

Let's get these from the header and pass them to our HTML template.

In the main.py file change the home() function to look as follows:

@app.route('/')
def hello_world():
    return render_template(
        'index.html',
        user_id=request.headers['X-Replit-User-Id'],
        user_name=request.headers['X-Replit-User-Name'],
        user_roles=request.headers['X-Replit-User-Roles']
    )

Above, we use request to get the Replit headers and place them into variables.

Next we should update our index.html page to use the headers passed to it and display them back to the user if they are authenticated.

Open the index.html file and replace the body with the following:

<body>
  {% if user_id %}
  <h1>Hello, {{ user_name }}!</h1>
  <p>Your user id is {{ user_id }}.</p>
  {% else %} Hello! Please log in.
  <div>
    <script
      authed="location.reload()"
      src="https://auth.util.repl.co/script.js"
    ></script>
  </div>
  {% endif %}
</body>

Above, we check if the user is already authenticated and display their account details. If not, they are asked to "Please log in".

Run the application and you should see Hello, <username>! Your user id is <user_id>

Hello user_name

Warning

Be aware that if you're going to use an accounts system, PLEASE do all the specific logic for checking users on the BACK END, do not do it with JavaScript in your HTML.

Closing Notes

If you followed along, you'll have your own repl to expand. If not, you can fork our repl or test it out below.

Authenticating users with Repl Auth

Setup​

Creating the Basic Flask App​

The Authentication Script​

Retrieving Information from the Authenticated Account​

Warning​

Closing Notes​