replit-auth
Version:
A really optimized and small express middleware for repl authentication.
28 lines • 4.83 kB
HTML
<html lang="en"><head>
<title>Auth</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans">
<style>body{margin:0;height:100vh;display:flex;justify-content:center;align-items:center;background:#004182;font-family:"IBM Plex Sans",sans;color:#f5f9fc}.title-box{font-size:12px;inline-size:max-content}.replit-auth-error{padding:1em;max-width:30em}.message{display:flex;flex-direction:column;align-items:center}@media (max-width:500px){.message{flex-direction:column;align-items:center}}.console{background-color:#0e1628;color:#fff;font-family:"IBM Plex Sans",sans;padding:1em;margin:1em}.footer{margin:1em;text-align:center}.link-icon{margin-right:20px;margin-top:4px}.auth-text{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-size:16px;align-items:center;text-align:center;margin-left:8px;color:#f5f9fc}.auth-sign-up{cursor:pointer}.auth-icon{flex:none;order:0;flex-grow:0}.replit-auth-button{display:flex;justify-content:center;align-items:center;padding:8px;margin:auto;border:none;cursor:pointer;background:#1c2333;border-radius:8px}.replit-auth-button:hover{background:#2f3a52}a{color:#c2c8cc}</style>
<script>var reload_timeout=setTimeout((function(){window.location.reload()}),6e4)</script>
</head>
<body>
<div class="message">
<div class="title-box">
<h1>You must be logged in to access this page.</h1>
</div>
<div class="footer" id="footer">
<button id="replit-auth-button" class="replit-auth-button">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.24974 10.7838C6.24974 10.7838 2.97419 22.8525 16.1029 22.9575C20.2221 21.4241 23.2574 17.6647 23.7174 13.1322C23.7492 12.8187 23.7586 12.4989 23.7657 12.1786C23.767 12.0943 23.7783 12.0124 23.7783 11.9275C23.7783 11.5626 23.756 11.2026 23.7237 10.846C20.2552 24.5004 4.91064 19.1521 6.24974 10.7838Z" fill="#F5F9FC"></path>
<path d="M13.0382 6.30412C13.0382 6.30412 0.814564 2.89046 1.00256 16.219C1.62916 17.8296 2.60156 19.2832 3.85117 20.477C3.90368 20.5267 3.95804 20.5737 4.01108 20.6225C4.36454 20.9484 4.73755 21.2524 5.12804 21.5328C5.1887 21.5762 5.24567 21.6239 5.30659 21.6662C5.71964 21.9487 6.15035 22.2044 6.59606 22.4319C6.72551 22.4986 6.85863 22.5595 6.98992 22.6217C7.37348 22.8023 7.7666 22.9618 8.16754 23.0996C8.266 23.1332 8.36 23.1752 8.45978 23.2064C8.94045 23.3534 9.43011 23.4692 9.9257 23.553C10.0756 23.5793 10.2271 23.6014 10.3789 23.6224C10.893 23.6966 11.4115 23.7369 11.9309 23.7429C11.9509 23.7429 11.9701 23.746 11.99 23.746C12.3818 23.746 12.7685 23.725 13.15 23.6875C-0.564973 20.4167 4.64807 5.08055 13.0382 6.30412Z" fill="#F5F9FC"></path>
<path d="M17.8028 12.6249C17.8028 12.6249 20.6947 0.43282 7.67706 0.977388C3.31185 2.70168 0.22168 6.94899 0.22168 11.9265C0.225739 12.4625 0.26618 12.9976 0.342724 13.5282C3.08237 -0.265614 18.6902 4.20173 17.8028 12.6249Z" fill="#F5F9FC"></path>
<path d="M11.5523 17.8716C11.5523 17.8716 23.7972 19.4701 23.0308 7.82807C21.3642 3.34681 17.0613 0.148193 12 0.148193C11.2833 0.150963 10.5684 0.218898 9.86399 0.351159C23.5081 2.02609 19.9619 17.9908 11.5523 17.8716Z" fill="#F5F9FC"></path>
<path d="M15.3992 11.9278C15.3992 12.5804 15.2057 13.2183 14.8431 13.7608C14.4805 14.3034 13.9652 14.7263 13.3623 14.976C12.7594 15.2256 12.096 15.2909 11.456 15.1635C10.816 15.0361 10.2281 14.7218 9.76677 14.2603C9.30542 13.7988 8.99129 13.2109 8.86411 12.5708C8.73692 11.9308 8.80241 11.2674 9.05228 10.6645C9.30214 10.0617 9.72517 9.54653 10.2679 9.18414C10.8105 8.82175 11.4485 8.62843 12.1011 8.62864C12.9759 8.62885 13.8148 8.97654 14.4333 9.59524C15.0518 10.2139 15.3993 11.053 15.3992 11.9278Z" fill="#F5F9FC"></path>
</svg>
<span class="auth-text">Login With Replit</span>
</button>
<p class="auth-sign-up">don't have an account? <u>sign up</u></p>
</div>
<script authed="location.reload()">(function(){var scr=document.currentScript,footer=document.getElementById("footer");if("https:"!==location.protocol){var err=document.createElement("div");err.className="replit-auth-error",err.textContent="Replit auth requires https!",scr.parentNode.insertBefore(err,scr)}footer.onclick=function(){window.addEventListener("message",authComplete);var h=500,w=350,left=screen.width/2-w/2,top=screen.height/2-h/2,authWindow=window.open("https://replit.com/auth_with_repl_site?domain="+location.host,"_blank","modal =yes, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+w+", height="+h+", top="+top+", left="+left);function authComplete(e){"auth_complete"===e.data&&(window.removeEventListener("message",authComplete),authWindow.close(),scr.attributes.authed.value?eval(scr.attributes.authed.value):location.reload())}},scr.parentNode.insertBefore(footer,scr)})()</script>
</div>
</body>
</html>