Log In With Replit / Repl Auth redirects un-authed customers to https://replit.com/ on login

Support Bug Reports
1

Problem description:
Using the instructions here: https://docs.replit.com/hosting/authenticating-users-repl-auth I added a button to my repl. When logging in from unauthenticated state, customers end up in an odd state - they redirect to the replit home page in a new tab. This is a usability challenge - technically, they can go back to my repl in the original tab and click log in again and that gets them to the correct flow, but I have no way to communicate that. Authenticated users work as expected.

Expected behavior:
Clicking the log in with replit button from my replit page, allows unauthenticated users to log in, then redirects them to the app consent flow, and on success, lands them in my beautiful repl for them to enjoy my hard work. Cause my face to look like: :star_struck:

Actual behavior:
Imagine my face when I demo’d my fancy button and logging in redirected my user to the replit home page instead of right back to my repl! It was like this: :melting_face:

Steps to reproduce:

  • Log out of replit
  • Visit my repro replit linked below
  • Click the log in button
  • log in with any replit account

Bug appears at this link:

User Link: https://login-error-demo.relevantsam.repl.co

Browser/OS/Device:

Multiple, validated on:

  • Safari / macOS Big Sur / Macbook Pro
  • Safari / iOS 16.5 / iPhone 14 Pro Max
2

Hey @relevantsam welcome to the forums!

Could you please show us a code snippet (using the backticks » ```) of your HTML code?

1 Like
3

Even better, here’s the repl:
https://replit.com/@relevantsam/login-error-demo?s=app

I think the core of the issue is actually with the auth ui. Even on ask.Reddit.com if I am sent through that experience it doesn’t return me to the screen I originated from, it returns me to replit home and I have to renavigate to wherever I was originally going. That means, for my issue, that when the consent screen finds me unauthed, it sends me to the login page, and in theory, the login page actually should send me back to the consent screen post-auth, but lands me on replit home instead.

1 Like
4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root" class="container mx-auto"></div>
    <div id="auth" class="container mx-auto">
      <script
        authed="location.reload()"
        src="https://auth.util.repl.co/script.js"
       ></script>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Index.html for convenience

1 Like
5

@relevantsam first the <script> tag shouldn’t have the script like this <script (code)></script> it should be <script>(code)</script>. Second there isn’t a function for a button to call. Third there isn’t a button to click to call the function.
Here is your updated code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root" class="container mx-auto"></div>
    <div id="auth" class="container mx-auto">

    <button onclick=“authentication()”>Authenticate</button>

    <script>
      function authentication() {
         authed="location.reload()"
         src="https://auth.util.repl.co/script.js"
         //rest of code here
      }
    </script>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Hope this helps :grinning:!

1 Like
6

Thank you for looking at my code!

However, that information is not actually right. Script html elements can have src attributes that load their contents from a remote URL (reference: <script>: The Script element - HTML: HyperText Markup Language | MDN).

Additionally, I don’t have an issue with how my repl is working - I have an issue with how the log in screen hosted by replit is working. You can see on the replit documentation here: https://docs.replit.com/hosting/authenticating-users-repl-auth that I am following the exact format that replit recommends for providing login with replit (as in for this demo, I literally copy / pasted the html snippet). This general approach is actually not what I’d like to use in my other repl where I use the login, but when I get creative, I still hit the issue with the replit login page.

2 Likes
7

Try adding authed="location.replace('URL')" to your script tag, with URL being the URL you want the site to redirect to.

<!-- This code snippet came from the doc
you provided the link to. -->
<div>
  <script
    authed="location.reload()"
    src="https://auth.util.repl.co/script.js"
  ></script>
</div>
2 Likes
8

For the unauthened sequence, the authed event never fires - the sequence is:

  1. Unauthenticated (not logged into replit) customer clicks button in repl :white_check_mark:
  2. New tab opens and attempts to navigate to the “consent” screen where customers allow a repl to see their account :white_check_mark:
  3. Consent screen detects an unauthenticated user and redirects to login screen :white_check_mark:
  4. Customer logs in :white_check_mark:
  5. Replit login screen redirects to replit.com :x:

In 5, the login screen should redirect to the consent screen. I noticed that the login screen globally seems to redirect to replit.com instead of the originating url - this impacts, for example, joining a multiplayer repl via url if you are not yet logged in, or replying to an ask.replit.com thread starting from not logged in state. Try it out by going to a private browsing tab and hitting reply on this thread.

Sequence SHOULD be:

  1. Unauthenticated (not logged into replit) customer clicks button in repl :white_check_mark:
  2. New tab opens and attempts to navigate to the “consent” screen where customers allow a repl to see their account :white_check_mark:
  3. Consent screen detects an unauthenticated user and redirects to login screen :white_check_mark:
  4. Customer logs in :white_check_mark:
  5. Replit login screen redirects to consent screen.
  6. Customer consents
  7. Consent ui records the consent
  8. Consent ui emits event that is detected by original tab
  9. Original tab closes the consent tab and reloads
1 Like
9

I see what you mean. Replit changed its login page recently; perhaps it is because of that.

4 Likes
10

How to make the user icon appears when he is log in?