Migrate Auth0 integration to Astro with TypeScript SDK#59
Merged
Conversation
The Auth0 integration was the unmodified SPA quickstart sample: it loaded the SDK from a floating CDN URL, fetched config at runtime, and dumped the raw access token and full user-profile JSON onto the homepage. - Use the installed @auth0/auth0-spa-js SDK bundled by Astro instead of the CDN script, and a shared typed auth module (src/lib/auth.ts) with a client singleton, login/logout, and redirect-callback handling - Enable useRefreshTokens + localStorage cache so the session survives this multi-page site's full-page navigations, plus an explicit "openid profile email" scope - Move config to PUBLIC_AUTH0_* env vars (with .env.example) instead of a runtime-fetched public/auth_config.json - Add BaseLayout with shared nav; rewrite the homepage to stop exposing tokens; add a gated /account page that renders a profile card via textContent - Wire login/logout via addEventListener instead of inline onclick globals - Add the missing @types/node devDependency so `npm run type-check` works Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DSA5hGpmzekUndBQEUiwpK
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
letsbuilda-dev | 5195510 | Commit Preview URL Branch Preview URL |
Jun 17 2026, 06:56 PM |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR modernizes the authentication system by migrating from a vanilla JavaScript Auth0 integration to a TypeScript-based implementation using the official
@auth0/auth0-spa-jsSDK within an Astro framework.Summary
Replaces the legacy Auth0 SPA sample with a production-ready authentication setup that leverages Astro's component model and modern TypeScript practices. The integration now uses environment variables for configuration, implements proper session persistence with refresh tokens, and provides a cleaner developer experience.
Key Changes
New Auth Module (
src/lib/auth.ts): Centralized authentication logic with functions for login, logout, user retrieval, and page initialization. Implements singleton pattern for the Auth0 client and handles redirect callbacks with app state preservation.Layout Component (
src/layouts/BaseLayout.astro): New base layout with navigation bar showing login/logout buttons that toggle based on authentication state. Replaces inline HTML boilerplate across pages.Account Page (
src/pages/account.astro): New gated page displaying user profile information (name, email, picture, etc.) with automatic redirect to Auth0 login if not authenticated.Updated Home Page (
src/pages/index.astro): Simplified to use the new BaseLayout and conditionally show account link or login prompt based on auth state.Styling (
public/css/main.css): Complete redesign with modern CSS for navigation, profile cards, and responsive layout. Replaces minimal utility styles.Configuration:
public/auth_config.jsonto environment variables (PUBLIC_AUTH0_DOMAIN,PUBLIC_AUTH0_CLIENT_ID).env.exampletemplate for local developmentsrc/env.d.ts)Removed Legacy Code: Deleted
public/js/app.js(old vanilla JS implementation) andpublic/auth_config.jsonNotable Implementation Details
textContent(neverinnerHTML) to prevent XSS vulnerabilitieshttps://claude.ai/code/session_01DSA5hGpmzekUndBQEUiwpK