Skip to main content

Corti Embedded Assistant Demos: Get Started

Looking to get started with our Embedded Assistant? Get started here.

Updated over a week ago

Prerequisites

  • Python 3 is needed to run a local web server.

Files in this project

File

Description

config.js

Shared configuration file containing region, realm, client IDs, redirect URIs, and scopes. Update this file once and all demos use it.

login-pkce.html

Auth Code with PKCE. Redirects to Corti's login page, exchanges code and code_verifier for tokens, then loads the assistant. Recommended for browser-based apps.

login-auth-without-pkce.html

Auth Code without PKCE. Same redirect flow as PKCE, but uses a client_secret for the token exchange, then loads the assistant. Best for server-side apps.

login-ropc.html

ROPC. Username/password form that sends credentials directly to the token endpoint, then loads the assistant. Intended for backend use only.

Auth method comparison

Auth Code with PKCE

Auth Code without PKCE

ROPC

User credentials

User logs in via browser redirect

User logs in via browser redirect

Username and password sent directly to the token endpoint from your app

Client secret

Not needed

Required

Optional (depends on config)

Extra security

code_verifier / code_challenge

client_secret

None

Best for

Browser-based/frontend apps

Server-side confidential clients

Backend/server-side

All three flows produce the same tokens. The difference is how the tokens are obtained, not what happens after. Once tokens are obtained, they are passed to the iframe via postMessage and the assistant behaves identically.

How The Demos Work

Each demo file is self-contained. It handles authentication and loads the Corti assistant on the same page. After you log in, the login form is replaced with the assistant iframe, and tokens are passed via postMessage.

To try a different auth method, open a different demo file.

Step 1: Create an API client in the Corti Console

  1. Go to the Corti Console and create a new API client for Corti Assistant Embedded. You'll need a separate API client for each authentication method you want to try.

  2. Choose the grant type that matches the demo you want to run (Auth Code with PKCE, Auth Code without PKCE, or ROPC).

  3. Set the redirect URL to match the demo file you'll be using:

    • PKCE: http://localhost:3000/login-pkce.html

    • Auth Code without PKCE: http://localhost:3000/login-auth-without-pkce.html

    • ROPC does not require a redirect URL.

Step 2: Update config.js

Open config.js and fill in the values from your API client:

  • CORTI_REGION is your Corti region (e.g. eu, us)

  • CORTI_REALM is your Corti realm name

  • The client ID (and client secret, if applicable) for the grant type you chose

All HTML demo files import this shared config, so you only need to update it once.

Step 3: Start the local server

Opening HTML files directly (file://) causes CORS and postMessage errors, so the demos need to be served over HTTP.

# From the embedded_demo folder, run: python -m http.server 3000

Then open http://localhost:3000 in your browser.

Step 4: Open a demo

Pick the auth method you want to try and open the corresponding page:

  • http://localhost:3000/login-pkce.html for Auth Code with PKCE

  • http://localhost:3000/login-auth-without-pkce.html for Auth Code without PKCE

  • http://localhost:3000/login-ropc.html for ROPC

See the sections below for setup details on each method.

Demo 1: Auth Code with PKCE

Demo file: login-pkce.html

What it does

  • Has a "Login with Corti" button with no username/password fields on your page.

  • Clicking it redirects the user to Corti's own login page.

  • After login, Corti redirects back with a code that is exchanged for tokens.

  • Your app never sees the user's password.

API client

If you followed Step 1, your API client should be configured as follows:

  • Grant type: Auth Code with PKCE

  • Redirect URL: http://localhost:3000/login-pkce.html

  • No client secret is needed. PKCE uses a code_verifier / code_challenge pair instead.

Setup

  1. Confirm config.js has the correct PKCE_CLIENT_ID and PKCE_REDIRECT_URI (see Step 2).

  2. Run the local server and open http://localhost:3000/login-pkce.html.

How it works

  1. Your app generates a random code_verifier and derives a code_challenge from it.

  2. The user is redirected to Corti's login page in the browser.

  3. After login, Corti redirects back to your page with an authorization code in the URL.

  4. handleCallback() runs on page load, detects the code, and exchanges code and code_verifier for tokens.

  5. The login form is replaced with the assistant iframe, and tokens are passed to it via postMessage.

Demo 2: Auth Code without PKCE

Demo file: login-auth-without-pkce.html

What it does

  • Has a "Login with Corti" button with no username/password fields on your page.

  • Clicking it redirects the user to Corti's own login page.

  • After login, Corti redirects back with a code that is exchanged for tokens using a client_secret.

  • Your app never sees the user's password.

API client

If you followed Step 1, your API client should be configured as follows:

  • Grant type: Auth Code (without PKCE)

  • Redirect URL: http://localhost:3000/login-auth-without-pkce.html

  • A client secret is required for this flow and should be copied into config.js.

Setup

  1. Confirm config.js has the correct AUTH_CODE_CLIENT_ID, AUTH_CODE_CLIENT_SECRET, and AUTH_CODE_REDIRECT_URI (see Step 2).

  2. Run the local server and open http://localhost:3000/login-auth-without-pkce.html.

How it works

  1. The user is redirected to Corti's login page (same as PKCE).

  2. After login, Corti redirects back with an authorization code.

  3. Your app exchanges the code and client_secret for tokens (instead of code_verifier).

  4. The login form is replaced with the assistant iframe, and tokens are passed to it via postMessage.

Demo 3: ROPC (Resource Owner Password Credentials), not recommended

ROPC requires your app to directly handle the user's password, which bypasses the security benefits of browser-based login (e.g. MFA, SSO, password policies managed by the identity provider). It is considered a legacy grant type and is deprecated in OAuth 2.1.

Demo file: login-ropc.html

What it does

  • Has a username/password form built into your page.

  • Credentials are collected by your app and sent directly to the token endpoint.

  • No browser redirect is involved. The user stays on your page throughout the flow.

API client

If you followed Step 1, your API client should be configured as follows:

  • Grant type: ROPC

  • No redirect URL is needed. Credentials are sent directly to the token endpoint.

Setup

  1. Confirm config.js has the correct ROPC_CLIENT_ID (see Step 2).

  2. Run the local server and open http://localhost:3000/login-ropc.html.

How it works

  1. User enters username and password in your form.

  2. Your app sends credentials directly to Corti's token endpoint.

  3. Token endpoint returns access_token, refresh_token, and id_token.

  4. The login form is replaced with the assistant iframe, and tokens are passed to it via postMessage.

Attachment icon
login-auth-without-pkce.html
Attachment icon
login-pkce.html
Attachment icon
login-ropc.html
Related Articles
How to Generate and Use an API Client in Corti Console
Starter Guide to Corti's API
Did this answer your question?