> ## Documentation Index
> Fetch the complete documentation index at: https://pavan-c90e8846.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```env theme={null}
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=
```

<Warning>
  Never commit `.env.local` to version control. Add it to `.gitignore` before pushing your project to GitHub.
</Warning>

## Get Your Convex URL

<Steps>
  <Step title="Create a Convex project">
    Go to the [Convex dashboard](https://dashboard.convex.dev/) and create a new project.
  </Step>

  <Step title="Run convex dev">
    In your project root, run:

    ```bash theme={null}
    npx convex dev
    ```

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

  <Step title="Copy the URL">
    After linking, find your development URL in the Convex dashboard or CLI output and paste it into `NEXT_PUBLIC_CONVEX_URL`.
  </Step>
</Steps>

## Get Your Kinde Credentials

<Steps>
  <Step title="Create a Kinde application">
    In your [Kinde dashboard](https://kinde.com/), create a new application and choose **Back-end web**.
  </Step>

  <Step title="Copy the client credentials">
    Copy the **Client ID** and **Client Secret** from the Kinde application settings into `KINDE_CLIENT_ID` and `KINDE_CLIENT_SECRET`.
  </Step>

  <Step title="Set the issuer URL">
    The issuer URL follows this pattern:

    ```text theme={null}
    https://YOUR_KINDE_SUBDOMAIN.kinde.com
    ```

    Paste it into `KINDE_ISSUER_URL`.
  </Step>

  <Step title="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`
  </Step>

  <Step title="Map to .env.local">
    Paste the matching values into:

    * `KINDE_SITE_URL`
    * `KINDE_POST_LOGIN_REDIRECT_URL`
    * `KINDE_POST_LOGOUT_REDIRECT_URL`
  </Step>
</Steps>

## Verify the Setup

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

```bash theme={null}
npm run dev
```

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

<Note>
  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.
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.