A proof of concept demonstrating how Auth0 powers Cruise0’s modernization journey:

• Seamless Social Sign-Up (Google)
• Verified Sign-Up + MFA (Email/Password + MFA)
• Block Disposable Emails (Action + Validator)

Live Demo: https://cruise0.basil.one
Presentation Deck: https://deck.cruise0.basil.one

Modernization builds capability. Transformation redirects attention.

By simplifying identity plumbing, teams regain focus on customer value, brand trust, and insight.

• Branded Universal Login with Cruise0 logo and ocean imagery
• Landing Page → “Top Deck: The Sundeck” (auth-gated)
• Sundeck → “Dive into the Engine Room” (auth-gated)
• Below Deck: The Engine Room — three flow cards (auth-gated)
• Per-flow pages with “Back to Engine Room” navigation

• React (Vite) + Auth0 SPA SDK (See Auth0 React SPA Quickstart)
• Actions: Post-login enrichment (country from IP) + Terms consent
• Conditional MFA for database users (social logins bypass MFA)
• Disposable Email Validation (Action + custom validator)

If you don’t already have a tenant, create a free Auth0 development tenant:

https://auth0.com/signup

Application Settings:

From the Applications Dashboard, open the Cruise0 application, navigate to Settings and note:

• OAuth Domain
• OAuth Client ID

Then update the following:

Save changes.

Before continuing, enable at least one multi-factor authentication method (such as One-time Password (OTP)) for your tenant. This ensures your database connection flow can prompt for MFA when configured later.

Visit: Auth0 → Security → Multi-factor Auth

cp .env.example .env.local
# then set your values:
# VITE_AUTH0_DOMAIN=yourtenant.region.auth0.com
# VITE_AUTH0_CLIENT_ID=your_client_id

npm install
npm run dev

Visit Branding → Universal Login Customizations in your Auth0 dashboard.

You’ll update three areas: Colors, Widget, and Page Background.
Each section has its own “Save and Publish” action.

From Update branding theme → Colors, set:

Click Save and Publish.

From Update branding theme → Widget, set:

Click Save and Publish.

From Update branding theme → Page Background, set:

Click Save and Publish again.

✅ Result: Your Universal Login will now use Cruise0’s colors, logo, and background imagery, aligning your authentication experience with the overall brand theme.

Note: This setup just scratches the surface of what’s possible with Auth0’s branding and UX customization.
Explore advanced options such as custom CSS, templates, and branding APIs here:
https://auth0.com/docs/customize

Once branding and configuration are complete, validate that your Single Page Application (SPA) is communicating properly with Auth0.

At this stage, Actions have not yet been applied, so you won’t see post-login enrichment or disposable email validation — this step simply confirms the core integration.

Start the development server (if not already running), then open your app in the browser (for example, https://localhost:5173 or your configured host).

1. Social Sign-In (Google)

   • Navigate to https://YOUR_HOST/logout to ensure a clean session.
   • From the landing page, select Sign In to Board.
   • In Universal Login, choose Continue with Google.
   • Verify redirect to the authenticated Sundeck page.
   • From Sundeck, select Dive into the Engine Room to confirm gated routing.
   • Logout to end and clear the session.

2. Database Sign-Up (Email/Password)

   • Navigate to https://YOUR_HOST/logout to ensure a clean session.
   • From the landing page, select Sign In to Board.
   • In Universal Login, choose Sign Up and register with email/password (database connection).
   • Verify redirect to the authenticated Sundeck page.
   • From Sundeck, select Dive into the Engine Room to confirm gated routing.
   • Logout to end and clear the session.

Visit Auth0 → User Management → Users.
You should now see both user records:

• One for the Google social connection
• One for the Database connection

Confirm expected profile attributes such as name, email, and connection type.

✅ Result: Your SPA is now verified to communicate successfully with Auth0, supporting both database and social login flows.

You’re ready to proceed with implementing Actions and intermediate and advanced identity capabilities.

To extend your setup beyond basic integration, visit the Engine Room in the SPA.

From there, explore the flow cards for the areas you’re interested in.

Each flow details the experience, requirements, core implementation details and relevant reference links.

Apply and tune these directly in your tenant as desired.

Modernization builds capability. Transformation redirects attention.
When identity flows effortlessly, teams can focus where it matters most — on momentum and customer experience.