Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
LastLogin Auth is the simplest way to add user authentication to your HTTP val.
LastLogin is a decentralized hosted auth provider that enables login to any app through email, Google, Github, etc without API keys.
This val exports middleware that can be added to any HTTP val.
While LastLogin supports many login providers, it's often simplest to have a single "Login with Google" button.
These instructions were written to be easily copy-and-pasteable into LLMs like Townie.
import { lastlogin } from "https://esm.town/v/stevekrouse/lastlogin_safe"
- Wrap & export the main HTTP handler:
export default lastlogin(handler)
. - In the HTTP handler, retrieve the user's email:
const email = request.headers.get("X-LastLogin-Email")
- If email, show that user's content, and a logout link to "/auth/logout"; if no email, show login options.
import { LoginWithGoogleButton } from "https://esm.town/v/stevekrouse/LoginWithGoogleButton"
- Use the React Component, optionally supplying the
text
attribute - Add "via LastLogin" underneat LoginWithGoogleButton, centered, secondary text, linking to https://lastlogin.io/
- Pass the email from the server to the client-side code if using React hydration or similar techniques.
- Your users click on the React Component in your app
- The opens a new window to /auth/login?provider=google in your app
- This middleware directs them to log into Google via LastLogin
- They log in to Google
- Google redirects to LastLogin, who redirects back to /auth/callback in your app
- This middleware "logs them in" to your app by giving them a session cookie.
- In your app, you can read the
X-LastLogin-Email
header to see which (if any) user is logged in
The classic LastLogin authentication flow is to redirect your user to lastlogin.io/login, where they can pick which way to login: email, Google, Github, etc.
These instructions were written to be easily copy-and-pasteable into LLMs like Townie.
import { lastlogin } from "https://esm.town/v/stevekrouse/lastlogin_safe"
- Wrap & export the main HTTP handler:
export default lastlogin(handler)
. - In the HTTP handler, retrieve the user's email:
const email = request.headers.get("X-LastLogin-Email")
- If email, show that user's content, and a logout link to "/auth/logout";
- If no email, add a link to "Login or Sign Up" to "/auth/login"
- Pass the email from the server to the client-side code if using React hydration or similar techniques.
- Your users click on a link to
/auth/login
in your app - This middleware directs them to login via LastLogin
- They authenticate to LastLogin
- LastLogin redirects them back to your app
- This middleware "logs them in" to your app by giving them a session cookie.
- In your app, you can read the
X-LastLogin-Email
header to see which (if any) user is logged in
- If you want username & password auth: @stevekrouse/lucia_middleware
- This middleware stores sessions in the
lastlogin_session
table in your Val Town SQLite - This val has NOT been properly audited for security. I am not a security expert. I would suggest only using it for demos, prototypes, or apps where security is not paramount. If you are a security expert, I would appreciate your help auditing this!
- Let the user customize the name of the SQLite table
- Get a proper security audit for this