Learn to Code via Tutorials on Repl.it!

← Back to all posts
Authenticating users with Repl.it Auth
h
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)

(/templates/index.html)

Nothing interesting yet.

The authentication script

Now, we'll add the authentication script.

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)

(templates/index.html)

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
EpicRaisin
NAITtech
Code1Tech
weeklyd3
JakeHu2020
JWZ6
programmertest2
Pixl8
ddiaknowlege
Baconman321
Comments
hotnewtop
amasad

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

qualladoom

@mat time for a real life example!?

Coder100

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

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/

MrEconomical

@amasad
repl mail, repl chat ;)

amasad

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

21natzil

@amasad sure thing!

MrEconomical

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

IMightBeMe

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

Coder100
mylesbartlett

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

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.

GL1CH3D
RayhanADev

@vve so profound.

ShivankChhaya

How do you get the user's avatar?

AgastyaSandhuja

@mat1
Would getting the user's profile picture be

or something like that...?

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.

RahulChoubey1

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

JULIODIAZ1

How do you get a persons cycles tho.

CosmicBear
JakeHu2020

Very Cool, but how do you log out?

ruiwenge2

@JakeHu2020 you have to delete the cookie

JakeHu2020

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

ruiwenge2

@JakeHu2020 were you logged in?

JakeHu2020

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

ruiwenge2

@JakeHu2020 just click on it then press delete/backspace

JakeHu2020

@ruiwenge2 oh ok it worked :)

JWZ6

thank u so much

jimbraga

Thanks so much. I did it.
geometry dash

jimbraga

Thanks so much. I did it.
geometry dash

HawtRajpoot
VulcanWM

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

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.

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.

ch1ck3n

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

ch1ck3n

@ch1ck3n Never mind i got it

print(request.META["HTTP_X_REPLIT_USER_NAME"])

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.

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.

mollthecoder

Is it possible to do this in express?

littlepenguin

@mollthecoder @Coder100 did a tutorial on that.

Coder100

oh yeah i did @CT2224

hg0428

An Error occured:
Failed to authenticate :(

InvisibleOne

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

xxpertHacker

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

RayhanADev

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

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:

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.

YodaCode

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

RayhanADev

@YodaCode yessir! Cookie made two tutorials on it.

GL1CH3D

Wow!

AliA6

Is there a way to update node.js?

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.

hello4691

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

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?

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.

InvisibleOne

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

MarcusWeinberger

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

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

PYer

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

CodeSalvageON

imma use this to burn users at da stake

staticvoidliam7

tip from google

DONT SEND TO BACKEND

JamesGordon1

How would I make this backend? I need it for this project I'm making: https://repl.it/@JamesGordon1/Simple-chat-V01

AdCharity

@JamesGordon1 you could probably make a request to repl.it/login but since you don't host a site with flask or something similar I'm not sure how you'd set it up.

JamesGordon1

@AdCharity nvm i user .env

Leroy01010
JamesGordon1
Leroy01010

don't worry @JamesGordon1