Configure LiveCanvas Environment Variables

Set up Convex and Kinde environment variables in .env.local to connect LiveCanvas to its realtime backend and authentication provider.

LiveCanvas requires two external services: Convex for the realtime backend and Kinde for authentication. You store the connection details in a .env.local file at the root of the project.

Required Environment Variables

Copy the example below into .env.local and fill in the values from your Convex and Kinde dashboards:

NEXT_PUBLIC_CONVEX_URL=

KINDE_CLIENT_ID=

KINDE_CLIENT_SECRET=

KINDE_ISSUER_URL=

KINDE_SITE_URL=

KINDE_POST_LOGIN_REDIRECT_URL=

KINDE_POST_LOGOUT_REDIRECT_URL=

Never commit .env.local to version control. Add it to .gitignore before pushing your project to GitHub.

Get Your Convex URL

1. Create a Convex project

   Go to the Convex dashboard and create a new project.

2. Run convex dev

   In your project root, run:

   npx convex dev
   

   Follow the prompts to select your project. Convex writes the production and development URLs into your project settings.

3. Copy the URL

   After linking, find your development URL in the Convex dashboard or CLI output and paste it into NEXT_PUBLIC_CONVEX_URL.

Get Your Kinde Credentials

1. Create a Kinde application

   In your Kinde dashboard, create a new application and choose Back-end web.

2. Copy the client credentials

   Copy the Client ID and Client Secret from the Kinde application settings into KINDE_CLIENT_ID and KINDE_CLIENT_SECRET.

3. Set the issuer URL

   The issuer URL follows this pattern:

   https://YOUR_KINDE_SUBDOMAIN.kinde.com
   

   Paste it into KINDE_ISSUER_URL.

4. Configure callback URLs

   In Kinde application settings, set the following URLs:

   • Site URL: http://localhost:3000 or your production domain
   • Allowed callback URLs: same value as KINDE_POST_LOGIN_REDIRECT_URL
   • Allowed logout redirect URLs: same value as KINDE_POST_LOGOUT_REDIRECT_URL
5. Map to .env.local

   Paste the matching values into:

   • KINDE_SITE_URL
   • KINDE_POST_LOGIN_REDIRECT_URL
   • KINDE_POST_LOGOUT_REDIRECT_URL

Verify the Setup

After filling in .env.local, restart your Next.js dev server with:

npm run dev

Open http://localhost:3000 and try signing in. If Convex connects and Kinde redirects you back to the app, your environment is correctly configured.

For production deployments on Vercel, add the same environment variables in your Vercel project settings. Update the callback and logout URLs to match your production domain.