Skip to content
← Back to Community
Authenticating users with Repl.it Auth
Profile icon
h
has Hacker Plan
mat1

This tutorial will teach you how to use the Repl.it Auth API.

Prerequisites

You are required to know the following before you start:

  • Basic knowledge of Python/Flask
  • Basic knowledge of Jinja2 (Flask templating)
  • Basic knowledge of HTML

Starting off

We'll start off with a basic Flask template (main.py)

from flask import Flask, render_template, request app = Flask('app') @app.route('/') def hello_world(): return render_template('index.html') app.run(host='0.0.0.0', port=8080)

(/templates/index.html)

<!doctype html> <html> <head> <title>Repl Auth</title> </head> <body> Hello! </body> </html>

Nothing interesting yet.

The authentication script

Now, we'll add the authentication script.

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

This can be placed anywhere in the document body and will create an iframe in its parent element. Additionally, any JavaScript placed in the authed attribute will be executed when the person finishes authenticating, so the current one will just reload when the user authenticates.
If you run it now, you will notice a big Let (your site url) know who you are? with a small version of your profile and an Authorize button.
You can click the button but nothing will happen.

The headers

Now, let's make something happen.
Go back to your main.py file; we will be grabbing the Repl.it specific headers for the request and extracting data from them.
The main ones we care about are: X-Replit-User-Id, X-Replit-User-Name, and X-Replit-User-Roles. The username one will probably be the most useful for now.
With this information, we can let our HTML template be aware of them.
(main.py)

@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'] )

(templates/index.html)

<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.turbio.repl.co/script.js"></script> </div> {% endif %} </body>

Success!

Now, run your code. It should display a big Hello, (your username)! along with your user ID.

If you want to port this to other languages or frameworks like NodeJS + Express, just be aware of how you can get specific request headers.

Warning

Also, be aware that if you're going to be using an accounts system, PLEASE do all the specific logic for checking users on the BACKEND, that means NOT doing it with JavaScript in your HTML. That is all.

Please upvote my post if you found it helpful :)

If you want it, here is the source code for the basic Repl Auth script demonstrated in this tutorial https://repl.it/@mat1/repl-auth-example.

Voters
Profile icon
schoolhacker
Profile icon
AmoghTheCool
Profile icon
sqcodes
Profile icon
RuoqinJi
Profile icon
TheH4ck3r
Profile icon
ituir
Profile icon
MatthewParry3
Profile icon
NicoleL7
Profile icon
EpicRaisin
Profile icon
RunX
Comments
hotnewtop
Profile icon
amasad

First person makes something cool with this will get a MAJOR shoutout on the next newsletter.

Profile icon
[deleted]

@mat time for a real life example!?

Profile icon
Coder100

How about creating and storing data with the repl.it accounts? @enigma_dev

Profile icon
Scoder12

@amasad I used to constantly use this bookmarklet script that would allow me to get to a repl quickly, now I made it into a site that anyone can use with repl auth: http://repl-chooser.scoder12.repl.co/

Profile icon
MrEconomical

@amasad
repl mail, repl chat ;)

Profile icon
amasad

@21natzil can you please showcase repl auth and repl mail/chat in the next newsletter? @MrEconomical

Profile icon
21natzil

@amasad sure thing!

Profile icon
MrEconomical

@amasad thanks for featuring my project! it really means a lot to me!

Profile icon
IMightBeMe

You could use replit’s database. (Tho u prob already know that know lol) @Coder100

Profile icon
Coder100
Profile icon
mylesbartlett

Yeah, JavaScript logic for checking users is asking for some attacker to come and bypass authentication.

Profile icon
Scoder12

@mylesbartlett theres no way to circumvent it as repl sends the authentication headers to the server and theres no way to forge them. Content security policies prevent most iframes attacks you can think of, so I would say its pretty secure.

Profile icon
GL1CH3D
Profile icon
RayhanADev

@vve so profound.

Profile icon
ShivankChhaya

How do you get the user's avatar?

Profile icon
AgastyaSandhuja

@mat1
Would getting the user's profile picture be

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"], user_profile-pic=request.headers["X-Replit-User-Picture"] )

or something like that...?

Profile icon
Nayoar

@AgastyaSandhuja I don't think so. If you want a user's avatar you'll probably have to scrape it off their profile page.

Profile icon
RahulChoubey1

@AgastyaSandhuja os.getenv("REPL_IMAGE") gives the URL

Profile icon
duckiecousingam

this tutorial SUCKS

Profile icon
ahkid7674

How do you get a persons cycles tho.

Profile icon
CosmicBear
Profile icon
JakeHu2020

Very Cool, but how do you log out?

Profile icon
ruiwenge2

@JakeHu2020 you have to delete the cookie

Profile icon
JakeHu2020

@ruiwenge2 I don't really see a cookie...

Profile icon
ruiwenge2

@JakeHu2020 were you logged in?

Profile icon
JakeHu2020

@ruiwenge2 now I see it, but I can't change it to an expired date with document.cookie

Profile icon
ruiwenge2

@JakeHu2020 just click on it then press delete/backspace

Profile icon
JakeHu2020

@ruiwenge2 oh ok it worked :)

Profile icon
JWZ6

thank u so much

Profile icon
jimbraga

Thanks so much. I did it.
geometry dash

Profile icon
jimbraga

Thanks so much. I did it.
geometry dash

Profile icon
HawtRajpoot
Profile icon
VulcanWM

uh so this will save by itself and i dont need cookies or anything to store user?

Profile icon
IMightBeMe

How would I add logout functionality with repl auth? I'm trying to make a password manager in flask and thought that repl auth would be a good choice.

Profile icon
Baconman321

Is this really safe? Can it be spoofed? I'm thinking of using my own login system for admin powers and replit auth for everything else.

Profile icon
ch1ck3n

I have a question, can you do this with django?

Profile icon
ch1ck3n

@ch1ck3n Never mind i got it

print(request.META["HTTP_X_REPLIT_USER_NAME"])

Profile icon
CoolCoderSJ

hmms
Im doing the exact same thing with webpy, and i copied the html part as it is, but the page reloads as soon as i click login with replit and the popup login box doesnt go away after auth.

Profile icon
Pixl8

@CoolCoderSJ Try opening it in a popup, worked for me :D
https://superdevresources.com/open-links-popup/
Check the link for an easy explanation. Replace the two links with your replit auth link.

Profile icon
mollthecoder

Is it possible to do this in express?

Profile icon
littlepenguin

@mollthecoder @Coder100 did a tutorial on that.

Profile icon
Coder100

oh yeah i did @CT2224

Profile icon
hg0428

An Error occured:
Failed to authenticate :(

Profile icon
InvisibleOne

That usually happens if you are on safari, what browser are you using? @hg0428

Profile icon
xxpertHacker

@turbio
Why does the script blindly assume that it was placed in the body, as opposed to the head?

// if it's in the <head> it won't show selem.parentNode.insertBefore(err, selem);
Profile icon
RayhanADev

@xxpertHacker i stole turbios code and slightly remake it for my repl auth projects.

Profile icon
xxpertHacker

@RayhanADev Same, I rewrote it entirely as a module.

Helpin Kooiez out and made:
https://kookiezapp.kookiez.repl.co/js/signin.js

To load:

<script data-replace="your URL" type="module" src="another URL of your choice/signin.js" /> ... <button data-repl-auth />

If data-replace is present then it redirects to its value, otherwise, it reloads the current page.

And it targets the data-repl-auth element to show the button in the DOM.

Also, we had server-side HTTPS redirects, so we were able to cut out a section of code related to that.

Much nicer overall.

Profile icon
YodaCode

Is there a way to do this in Node.js?

Profile icon
RayhanADev

@YodaCode yessir! Cookie made two tutorials on it.

Profile icon
GL1CH3D

Wow!

Profile icon
AliA6

Is there a way to update node.js?

Profile icon
ExariumDev09

Really cool! But, if you were to use Django, what will the code be? I'm still learning Python so it will be helpful.

Profile icon
hello4691

How do I save the username to a variable with python?

Profile icon
MarcusWeinberger

Hey, I'm working on my own auth provider similar to repl auth and I need some help. How does repl set the X-Replit headers?

Profile icon
MarcusWeinberger

Hey, do you have any idea why this wouldn't be working on an iPhone? I'm getting the error message An error occured Failed to authenticate :( on a plain white screen. This is inside the popup window, by the way.

Profile icon
InvisibleOne

Probably your browser @MarcusWeinberger
For some reason it hates safari on my computer, but works just fine with firefox

Profile icon
MarcusWeinberger

@InvisibleOne yeah there's an issue with all safari browsers

Profile icon
InvisibleOne

Yep, safari works great when it does, and sucks when it doesn't. Chrome is pretty good about working with everything, firefox is great too. @MarcusWeinberger

Profile icon
PYer

Any way to add styling to the button that shows up?

Profile icon
Danjaye

@PYer the button comes with a class, so just use that class in your CSS

Profile icon
CodeSalvageON

imma use this to burn users at da stake

Profile icon
staticvoidliam7

tip from google

DONT SEND TO BACKEND