Cleaner replit authentication wrapper with 300% more options than the default one.
Try it here: https://repl-auth-test.codingmaster398.repl.co/
<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.
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:
- 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!)
Yes, I did use https://auth.util.repl.co/ as a starting point, so thanks to them!