Skip to content

Auth0 User Name Collection Feature

Overview

This feature collects the user's name on first login/signup and stores it in Auth0's user metadata. The name is then displayed throughout the app instead of the hardcoded "Mooncake Unicorn" text.

How It Works

1. First Login/Signup Flow

  • User logs in or signs up via Auth0
  • After successful authentication, the callback checks if user has a name in their metadata
  • If no name exists, a needs_name flag is set in the session
  • User is redirected to the dashboard

2. Name Collection Modal

  • When needs_name flag is present, a modal automatically appears
  • Modal cannot be dismissed (backdrop is static)
  • User enters their name and clicks "Save"
  • Name is sent to /auth/update-name endpoint via AJAX

3. Updating Auth0 Metadata

  • Backend uses Auth0 Management API to update user metadata
  • Name is stored in user_metadata.name field
  • Session is updated with new metadata
  • needs_name flag is cleared
  • Page reloads to show the new name

4. Display User Name

  • Context processor injects user_name into all templates
  • Name is displayed in:
  • Mobile header (top bar)
  • Sidebar logo/title
  • Falls back to email username if no name is set
  • Falls back to "User" if no email available

Files Modified

Backend

  • apps/public/auth/auth0_helper.py
  • Added get_user_name() - retrieves name from session/metadata

  • Added update_user_metadata(name) - updates Auth0 via Management API

  • apps/public/auth/routes_auth0.py

  • Updated callback() - checks for name and sets needs_name flag

  • Added update_name() - POST endpoint to update user metadata

  • apps/public/app.py

  • Added inject_user_name() context processor

Frontend

  • apps/public/templates/base.html
  • Updated sidebar and mobile header to display {{ user_name }}
  • Added name collection modal with JavaScript handling
  • Modal appears when session.get('needs_name') is True

Auth0 Configuration Required

Management API Access

For the name update feature to work, your Auth0 application needs access to the Management API:

  1. Go to Auth0 Dashboard → Applications → Your Application → APIs tab
  2. Enable "Auth0 Management API"
  3. Grant the following permissions:
  4. read:users
  5. update:users
  6. update:users_app_metadata

Alternative: Machine-to-Machine Application

If you prefer, you can create a separate Machine-to-Machine application:

  1. Create M2M App: Auth0 Dashboard → Applications → Create Application → Machine to Machine
  2. Authorize for Management API: Select "Auth0 Management API"
  3. Grant Scopes: read:users, update:users, update:users_app_metadata
  4. Update Environment Variables: Use the M2M app's credentials instead

Environment Variables

No new environment variables needed - uses existing Auth0 credentials: - AUTH0_DOMAIN - AUTH0_CLIENT_ID - AUTH0_CLIENT_SECRET

Testing

Test New User Flow

  1. Clear your session: Visit /clear-session
  2. Log in with a new account
  3. Modal should appear asking for name
  4. Enter name and click Save
  5. Page reloads with your name displayed

Test Existing User

  1. Log in with existing account that has name in metadata
  2. No modal should appear
  3. Name should display immediately

Test Fallback

  1. Log in with account that has no name
  2. Modal appears
  3. Click Save without entering name
  4. Error message appears
  5. Enter name and save successfully

User Metadata Structure

{
  "user_metadata": {
    "name": "John Doe"
  }
}

Future Enhancements

  • Allow users to update their name from profile page
  • Add profile picture upload
  • Store additional preferences (timezone, currency, etc.)
  • Add email verification requirement before name collection