clean-replit-auth

Cleaner replit authentication wrapper with 300% more options than the default one.

Try it here: https://repl-auth-test.codingmaster398.repl.co/

Example

<button id="authButton">Continue with Replit</button>

<script src="https://cdn.jsdelivr.net/gh/codingMASTER398/clean-replit-auth/auth.min.js"></script>
<script>
  repl_auth({
    id: 'authButton',
    width: 600,
    height: 750
  })
</script>

When you click on the authButton, a replit authentication popup window will appear, having the width of 600 pixels and height of 750 pixels. The REPL_AUTH cookie will be saved and can be accessed backend.

Settings

repl_auth({
  id: 'authButton', // ID of the button
  width: 600, // Width of popup (default 350)
  height: 750, // Height of popup (default 500)
  onStartAuth: function(){}, // When the auth button has been clicked (default nothing)
  onAuth: function(){}, // When the authentication flow has completed, so you can reload the page or whatever (default reload)
  host: 'https://example.com/' // The host to pass to replit... don't know why you'd wanna change this. (default actual host)
})

You don't need any of these except id.

Migrating from https://auth.util.repl.co/ to this

Say you have this:

<script authed="alert('you authed!')" src="https://auth.util.repl.co/script.js"></script>

You can upgrade to clean-replit-auth easily:

<button id="authButton">Continue with Replit</button>

<script src="https://cdn.jsdelivr.net/gh/codingMASTER398/clean-replit-auth/auth.min.js"></script>
<script>
  repl_auth({id: 'authButton'})
</script>

You'd notice that this is more code, but here are some reasons you should keep it around:

Benifits

Much faster loading with jsdelivr's CDN
3x the amount of settings
Smaller file, minimised as far as it can go
Allows for easier and better button styling
You can change the text of the button (this doesn't exist in the default Replit wrapper!)

Acknowledgements

Yes, I did use https://auth.util.repl.co/ as a starting point, so thanks to them!