Aller au contenu principal

Frontend Environment Variables Setup

🔧 Required Environment Variables​

You need to create /apps/frontend/.env.local with these Auth0 and NextAuth configurations:

Create the file:​

# In your project root
touch apps/frontend/.env.local

Add these variables to apps/frontend/.env.local:​

# ==============================================
# NextAuth Configuration
# ==============================================
NEXTAUTH_URL=http://localhost:3001
NEXTAUTH_SECRET=your-super-secret-at-least-32-characters-long

# ==============================================
# Auth0 Configuration (Required)
# ==============================================
AUTH0_CLIENT_ID=your_auth0_client_id
AUTH0_CLIENT_SECRET=your_auth0_client_secret
AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com

# ==============================================
# Auth0 Optional Configuration
# ==============================================
# Organization ID (for multi-tenant setups)
AUTH0_ORGANIZATION_ID=org_your_organization_id

# API Audience (for backend API token validation)
AUTH0_AUDIENCE=https://api.emtb.com

# ==============================================
# API Configuration
# ==============================================
NEXT_PUBLIC_API_URL=http://localhost:3000
API_URL=http://localhost:3000

# ==============================================
# MUI Pro License
# ==============================================
NEXT_PUBLIC_MUI_LICENSE_KEY=your-mui-pro-license-key

🔍 How to Get Auth0 Values​

Step 1: Get Auth0 Application Credentials​

  1. Go to Auth0 Dashboard
  2. Applications → Your application
  3. Settings tab
  4. Copy these values:
# From Auth0 Application Settings:
AUTH0_CLIENT_ID=abc123...           # "Client ID"
AUTH0_CLIENT_SECRET=def456...       # "Client Secret"
AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com  # "Domain" (add https://)

Step 2: Configure Callback URLs in Auth0​

In the same Auth0 Application Settings, add:

# Allowed Callback URLs:
http://localhost:3000/api/auth/callback/auth0

# Allowed Logout URLs:
http://localhost:3000

# Allowed Web Origins:
http://localhost:3000

# Allowed Origins (CORS):
http://localhost:3000

Step 3: Generate NEXTAUTH_SECRET​

# Generate a secure secret:
openssl rand -base64 32

# Or use any 32+ character string:
NEXTAUTH_SECRET=my-super-secure-secret-that-is-at-least-32-characters-long

⚙️ Port Configuration​

Notice the ports in your setup:

  • Frontend: http://localhost:3000 (Next.js)
  • Backend: http://localhost:3001 (NestJS API)
  • Documentation: http://localhost:3002 (Docusaurus)

Make sure these match your actual development ports!

🧪 Test Your Configuration​

  1. Create the .env.local file:

    cp apps/frontend/.env.example apps/frontend/.env.local
    # Then edit with your actual values

  2. Start the frontend:

    cd apps/frontend
    npm run dev

  3. Test Auth0 login:

    • Visit: http://localhost:3000/auth/signin
    • Click "Sign in with Auth0"
    • Complete the login flow

🔒 Security Notes​

  • ✅ .env.local is automatically ignored by Git
  • ✅ Never commit Auth0 secrets to version control
  • ✅ Use different Auth0 applications for dev/staging/production
  • ✅ Rotate secrets regularly

🚨 Environment File Priority​

Next.js loads environment files in this order:

  1. .env.local (highest priority - use this for secrets)
  2. .env.development
  3. .env
  4. .env.example (lowest priority - template only)

Always use .env.local for your actual Auth0 credentials!

🔄 Example Complete Setup​

# apps/frontend/.env.local
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=5f9c2a1e8d3b7a4f6e9c8b2d5a1f4e7b9c6d3a8f2e5b1c9d6a3f8e2b5c9a6d3f

AUTH0_CLIENT_ID=abc123def456ghi789
AUTH0_CLIENT_SECRET=xyz789uvw456rst123_secretkey
AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com

NEXT_PUBLIC_API_URL=http://localhost:3001
API_URL=http://localhost:3001

NEXT_PUBLIC_MUI_LICENSE_KEY=your-mui-license-if-you-have-one

After creating this file, your NextAuth + Auth0 integration will work perfectly! 🎉