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)
<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.
@Coder100 It's pretty similar, just get the headers of the request (in Express its req.headers), and grab whatever information you want from there (req.headers['X-Replit-User-Name']). Also instead of Jinja2 you'll probably be using EJS.
This tutorial will teach you how to use the Repl.it Auth API.
Prerequisites
You are required to know the following before you start:
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.
This is a great post! Is there a way to make a node.js version of this?
@Coder100 It's pretty similar, just get the headers of the request (in Express its req.headers), and grab whatever information you want from there (req.headers['X-Replit-User-Name']). Also instead of Jinja2 you'll probably be using EJS.
What is the authed attribute? Doesn’t seem to do anything @mat1
Nvm, but how does the iframe get hidden with express? @Coder100
@Coder100 You can make templates in NodeJS with EJS. Here's a tutorial on how you can do that: https://www.tutorialspoint.com/expressjs/expressjs_templating.htm
How do I use pug on repl.it? @mat1
@Coder100 https://freshman.tech/learn-node/
Ok, thank you! I have succeeded: https://repl.it/talk/learn/How-to-Repl-Auth-Expressjs/23558 @TaylorLiang
@Coder100 @mat1 is this secure? Im planning to make password resets with it