How to use the Repl.it Authentication API with express.js
TOC
TL;DR
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
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!
As amasad said, "The first person to create something with this will get a shoutout in the next newsletter."
Yes. Why don't you make something cool with this? @PDanielY
@Coder100 I would, but I don't know what to create
Why don't you use the user ID to save things to jsonstore.io? @PDanielY
@Coder100 Ok, I guess I'll create that later.
Ok, good luck! @PDanielY
We already are with cyclebank. I'm pretty sure you are already a member. @PDanielY
@RohilPatel oh no, Vandesm invite me so I could fix API error
Oh. Whoops: sorry! @PDanielY
Cycle bank has nothing to do with repl.it authentication.
You should probably read @amasad 's post @RohilPatel
@Coder100 wait you were in cycle bank?
No, what is it? @AdCharity
Nice! I've been waiting for this.
Thanks! @MatthewDoan1
O great Coder100, can you help me? (〃 ̄︶ ̄)
How do you log out? @Coder100
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.
@YodaCode yes, you can, what makes you think you can't?
@Coder100 How would one go about doing that? Would I have to add AJAX requests to the auth page when it loads?
@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
@Coder100 Oh. Thanks.
one thing tho, HTML preprocessors are not pointless, they will really speed up your workflow among others @YodaCode
@Coder100 I have one more question. How do you log out using Repl.it?
delete all cookies and headers . @YodaCode
@Coder100 ok thats what I thought. thank you
Nice! But is it possible to do it with a normal html file? I don't know how pug files work
well, ig you could but it definitely wouldn't give you as much flexibility @CarlosRosiles
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
How do you do so without .pug files?
what do you mean? @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.
No, that's unfortunately not possible yet. You need a have a backend of some sort. @mamamia5x
@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
ah remote backends BIG BRAIN @ChezCoder
@Coder100 lol :D
How do you get the profile picture?
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"
}
Good job! Upvote if you agree!
@RohilPatel up-vote-far-mer
Thanks for making this
You're welcome! @PDanielY
i am only sure of two things in life, I am an idiot, and @Coder100 is a coder god.
lol :p @ChezCoder