Replit Auth in HTML

I’m trying to make a chat app in Replit using Socket.io, and I want to add a Replit Auth system where your username automatically gets added to the Username input box. Is it possible to do so?

https://replit.com/@Ez-Chat/EZChat?v=1

Thanks and have a nice Halloween

1 Like

You should see an ‘Authentication’ tab in the Dock in your Repl, click it and you should see this (it might only be in explorer mode, I’m not sure):
Auth
You can get the username of an authenticated user using getUserInfo and then just set the value of the input based on this.

1 Like

Yes this is possible.

1 Like

Thanks. But how do I exactly get the person’s username by getUserInfo? How do I make it so that the system inputs the username in the Username box?

You would do something like getUserInfo().then((user) => input.value = user.name );.

2 Likes

Thanks, but one last question. Where do I put it?

In a HTML file you could do something like this (I dunno how you’d do it with NodeJS, I stick to vanilla JS):

<script src="https://replit.com/public/js/repl-auth-v2.js"></script>
<button onclick="LoginWithReplit()">Login with Replit</button>
<script type="text/javascript">
    getUserInfo().then((user) => user ? : input.value = user.name : false);
</script>

You’d probably want to add some code to ensure the button doesn’t show if the user is already logged in.

It does not work. Where should I place it? Before the <head> tag?
I’ll keep looking on Google

I just tested it using this code under line 19 in /html/index.html:

<script src="https://replit.com/public/js/repl-auth-v2.js"></script>
 <button onclick="LoginWithReplit()">Login with Replit</button>
<script type="text/javascript">
	getUserInfo().then((user) => document.getElementById("NameInput").value = user ? user.name : "User");
 </script>

Which worked fine (although you probably want to move the button and style it).

1 Like

THANK YOU so much! It works now! :smile:

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.