FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
charmaine
charmainelastlogin
Remix of stevekrouse/lastlogin
Public
Like
lastlogin
Home
Code
2
README.md
S
main.tsx
Branches
1
Pull requests
Remixes
History
Environment variables
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.
Sign up now
Code
/
Code
/
Search
README.md

LastLogin Auth

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.

Login with Google

While LastLogin supports many login providers, it's often simplest to have a single "Login with Google" button.

Live Demo

How to setup

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.

How it works

  1. Your users click on the React Component in your app
  2. The opens a new window to /auth/login?provider=google in your app
  3. This middleware directs them to log into Google via LastLogin
  4. They log in to Google
  5. Google redirects to LastLogin, who redirects back to /auth/callback in your app
  6. This middleware "logs them in" to your app by giving them a session cookie.
  7. In your app, you can read the X-LastLogin-Email header to see which (if any) user is logged in

Login with LastLogin

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.

Screenshot 2024-08-08 at 08.48.41.gif

Live Demo

How to set up

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.

How it works

  1. Your users click on a link to /auth/login in your app
  2. This middleware directs them to login via LastLogin
  3. They authenticate to LastLogin
  4. LastLogin redirects them back to your app
  5. This middleware "logs them in" to your app by giving them a session cookie.
  6. In your app, you can read the X-LastLogin-Email header to see which (if any) user is logged in

Notes

  • 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!

Todos

  • Let the user customize the name of the SQLite table
  • Get a proper security audit for this
Code
README.md
S
main.tsx
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.