The best solution for authenticating users with Replit

Why?

As of this commit, this project is the only practical solution for Replit user authentication. This is because the official Replit solution only returns public information about an authenticated user. If only this is used to verify a user, it would be trivial to pose as another user by submitting another user's info, as it is public. In order to build a practical, robust and secure authentication system, some sort of secret information must be used, that only the original authenticated client and the authentication server know. This is what the sessionToken field in the login response body stands to solve. By including this secret information in subsequent communications with the authentication server, each request can essentially be linked to the original authention, verifying that the user is who they say they are.

Usage guide

Login

Initially, direct the user to https://login.replitauth.com, where they will be prompted to log into their Replit account.

After the user logs in to their Replit account, a message is sent to the window that opened the login window. The message contains data about the user that was just authenticated.

The minimal code for login handling is below;

function login() {
    window.addEventListener("message", authComplete);

    const authWindow = window.open("https://login.replitauth.com");

    function authComplete(msg) {
        window.removeEventListener("message", authComplete);
        authWindow.close();

        console.log(msg.data);
    } 
}

Upon a successful authentication, msg.data will contain the following data:

Name	Type	Description
success	boolean	Whether the authentication was success
sessionToken	string	The session token
replit.name	string	The username of the user
replit.avatar	string	A URL pointing to the user's profile picture
replit.uid	integer	The unique account identifier of the user
replit.roles	[string]	The roles belonging to the user
replit.teams	[string]	The teams the user is in

For example:

{
    "success": true,
    "sessionToken": "3f9108e6-62e1-49c7-8ce4-d691903fafe",
    "replit": {
        "name": "johndoe",
        "avatar": "https://storage.googleapis.com/replit/images/0123456789_0123456789abcdef.png"
        "uid": "1234567",
        "roles": ["Role1", "Role2"],
        "teams": ["Team1", "Team2", "Team3"]
    }
}