Skip to content
← Back to Community
How to Repl Auth Express.js
Profile icon
h
has Hacker Plan
Coder100

How to use the Repl.it Authentication API with express.js

TOC

TL;DR

code, example

Introduction

@mat1 Has made an epic tutorial on how to use repl.it authentication!
Sadly... it is with python.py and no offense, but python is pretty hard to use.
That's why I use express.js with node.js!

So, here's my tutorial:

You do what @mat1 did, but different: https://repl.it/talk/learn/Authenticating-users-with-Replit-Auth/23460

I used pug to achieve the same results, and instead of request.headers, you use request.get().

Try logging in!

Examine the code here: https://repl.it/@Coder100/Repl-Auth-Express

There's really not much more to say.

Read @mat1's tutorial and examine my code. Upvote if it worked for you and you could understand the code!

Deriving the API

If you go to Mozilla Firefox, open the repl auth website and type in a random domain, then click on inspect elements, and go to the network tab, fill in the form, you will see something interesting indeed. To get all that interesting headers, you will have to reload the page, as that is how you usually do anything that required updating. Well anyways, the rest is pretty self explanatory but I had to go to the https://expressjs.com documentation to learn how to use res.get().

How the code works

Pretty self explanatory, but if you want to know the gist of it, here you go.
index.js

Line 2: create an express application Line 3: Not needed, this was for something else Line 4: Use pug templates Line 5: More unnecessary things Line 8-25: Line 8: Get ‘/‘ directory Line 10-20: If the user has already logged in, we show template 1, which gives all the headers we know. Line 20-24: If the user hasn’t, we show template 2, which suggests the user should log in with repl.it Line 28: Listen I’m on port 8080

views/index.pug

Lines 1-13: SEO Line 14-28: Line 14: Gets user and starts if statement Line 15-22: If the user has logged in, show user data Line 22-28: Otherwise, prompt user to log in

If you have any more questions, please comment below with your question!

Pictures and summary

Example of data:
You have authed.

You have authed. Welcome Coder100! - Name: Coder100 - ID: 700842 - roles: self_learner

Summary: View the code here. Live working example here

Be sure to vote up this tutorial if you liked it!

Voters
Profile icon
Whacko
Profile icon
SharkCoding
Profile icon
XCode101
Profile icon
OldWizard209
Profile icon
Baconman321
Profile icon
PixiGem
Profile icon
Crowst
Profile icon
sojs
Profile icon
programmertest2
Profile icon
Spotandjake
Comments
hotnewtop
Profile icon
ChezCoder

i am only sure of two things in life, I am an idiot, and @Coder100 is a coder god.

Profile icon
Coder100
Profile icon
HackermonDev

As amasad said, "The first person to create something with this will get a shoutout in the next newsletter."

Profile icon
Coder100

Yes. Why don't you make something cool with this? @PDanielY

Profile icon
HackermonDev

@Coder100 I would, but I don't know what to create

Profile icon
Coder100

Why don't you use the user ID to save things to jsonstore.io? @PDanielY

Profile icon
HackermonDev

@Coder100 Ok, I guess I'll create that later.

Profile icon
Coder100

Ok, good luck! @PDanielY

Profile icon
RohilPatel

We already are with cyclebank. I'm pretty sure you are already a member. @PDanielY

Profile icon
HackermonDev

@RohilPatel oh no, Vandesm invite me so I could fix API error

Profile icon
RohilPatel

Oh. Whoops: sorry! @PDanielY

Profile icon
Coder100

Cycle bank has nothing to do with repl.it authentication.
You should probably read @amasad 's post @RohilPatel

Profile icon
AdCharity

@Coder100 wait you were in cycle bank?

Profile icon
Coder100

No, what is it? @AdCharity

Profile icon
AdCharity
Profile icon
MahadKalam

I have a question, couldn't this be spoofed?

Profile icon
Coder100

in what way @MahadKalam

Profile icon
MahadKalam

@Coder100 like, couldn't you change X-Replit-User-Name or the other headers to authenticate as someone else?

Profile icon
Coder100

well try it and see @MahadKalam

Profile icon
YodaCode

Is there a way to use normal HTML files instead of pug? HTML preprocessors are pointless in my opinion, and it would be a lot neater to just use regular HTML and Node.js.

Profile icon
Coder100

@YodaCode yes, you can, what makes you think you can't?

Profile icon
YodaCode

@Coder100 How would one go about doing that? Would I have to add AJAX requests to the auth page when it loads?

Profile icon
Coder100

@YodaCode no, you literally just have the auth button, and then once you log in, you have a backend that would do redirects for you based on the headers

Profile icon
YodaCode

@Coder100 Oh. Thanks.

Profile icon
Coder100

one thing tho, HTML preprocessors are not pointless, they will really speed up your workflow among others @YodaCode

Profile icon
YodaCode

@Coder100 I have one more question. How do you log out using Repl.it?

Profile icon
Coder100

delete all cookies and headers . @YodaCode

Profile icon
YodaCode

@Coder100 ok thats what I thought. thank you

Profile icon
codingjlu

@Coder100 cmon, be nice. He doesn't no what Pug is.

Profile icon
codingjlu

@YodaCode I know it's late but Pug gets turned into HTML. You can do it online: https://pughtml.com/

Profile icon
Coder100

no that is not the point of pug
yes of course it gets turned into HTML, but it is used for templating @codingjlu

Profile icon
codingjlu

@Coder100 oh yeah true dat just use ejs it's better

Profile icon
codingjlu

@YodaCode lol what? never heard of that. EJS is better.

Profile icon
codingjlu

@YodaCode lol idk just joking

Profile icon
Pro70CraZy

@codingjlu when i paste the code it wasn't generated

Profile icon
dietcok

@Coder100 how would you do that?

Profile icon
MatthewDoan1

Nice! I've been waiting for this.

Profile icon
Coder100
Profile icon
codingjlu

req.get, not res.get.

Profile icon
TsunamiOrSumth

O great Coder100, can you help me? (〃 ̄︶ ̄)

Profile icon
Whacko

How do you log out? @Coder100

Profile icon
TalinSharma

There is a cookie called REPL_AUTH, delete it...

@Whacko

Profile icon
[deleted]

Nice! But is it possible to do it with a normal html file? I don't know how pug files work

Profile icon
Coder100

well, ig you could but it definitely wouldn't give you as much flexibility @CarlosRosiles

Profile icon
Whippingdot

Hey Coder100, you know the website we are doing for repl.it.You are in on the project, we are adding repl auth. This is in this repl. I am doing my best to implement the repl auth by myself but if you can try to make it better. Also this is a different repl cause I already shared the other one. The link of the shared post is this @Coder100

Profile icon
mamamia5x

How do you do so without .pug files?

Profile icon
Coder100

what do you mean? @mamamia5x

Profile icon
mamamia5x

@Coder100 I mean, I want to make a HTML5 project that uses your username. How do I use the username and have the system remember it, within HTML5.

Profile icon
Coder100

No, that's unfortunately not possible yet. You need a have a backend of some sort. @mamamia5x

Profile icon
ChezCoder

@Coder100 we can set a route that res.send's the auth info and use an XMLHttpRequest to send a req to this route each time

Profile icon
Coder100

ah remote backends BIG BRAIN @ChezCoder

Profile icon
ChezCoder

@Coder100 lol :D

Profile icon
Coder100
Profile icon
AgastyaSandhuja

How do you get the profile picture?

Profile icon
Coder100

why not use repl.it graphQL
Be sure to set these headers (found on bottom left):

{ "X-Requested-With": "AgastyaSandhuja", "Referer": "https://repl.it", "Content-Type": "application/json", "User-Agent": "Mosaic" }

@AgastyaSandhuja

Profile icon
TalinSharma

I don't understand... Could you help?

Using with express.js...

@Coder100
@Coder100

Profile icon
RohilPatel

Good job! Upvote if you agree!

Profile icon
ChezCoder

@RohilPatel up-vote-far-mer

Profile icon
HackermonDev

Thanks for making this

Profile icon
Coder100

You're welcome! @PDanielY