Quick start
Connect a web application to Clikkle Identity with exact Console settings and framework-specific project files.
1. Create the application in Console
Open Console → Resources → Auth → Applications. Select the organization and project that own your app, create the application, then open its configuration. Console generates the Client ID; you do not invent one.
2. Register your application URLs
These values are entered in Console. They are not pasted into your React, Vite or Next.js source code.
Allowed web origin
https://your-app.example
Authorized redirect URI
https://your-app.example/auth/callback
Logout return URL
https://your-app.example/3. Save Console configuration
Save after adding the URLs. Keep PKCE enabled for browser/public clients. Console values must match the URLs your running application actually uses.
Add the Client ID to your project
The Client ID is the value that moves from Console into your application. Use your project’s existing environment configuration when it already has one. Do not create a second environment system only for Auth. Choose your framework below.
Vite
In the folder containing package.json, add the variable to your existing environment configuration. If none exists, create .env.local beside package.json.
VITE_CLIKKLE_AUTH_CLIENT_ID=YOUR_CLIENT_IDCreate React App
If your project already uses .env, .env.local or deployment-injected REACT_APP_* variables, add the Auth variable there. If it has no environment configuration, create .env.local beside package.json. Do not paste the Client ID into a page component such as src/pages/Login/index.jsx.
REACT_APP_CLIKKLE_AUTH_CLIENT_ID=YOUR_CLIENT_IDNext.js
Add the public Client ID to your existing environment configuration. For local development, .env.local beside package.json is the normal location.
NEXT_PUBLIC_CLIKKLE_AUTH_CLIENT_ID=YOUR_CLIENT_IDInstall the supported SDK
The Auth browser SDK is distributed through G7 Packages. It is not currently available for external installation until the public release is completed. Do not install an unverified package with the same name from npmjs.org. When the release is available, Console will show the supported registry/install configuration.
Vite client file
Create this helper only if your project does not already have a shared Auth client. A common location is src/auth/clikkle.ts.
// src/auth/clikkle.ts
import { createClikkleAuthClient } from "@clikkle/auth";
export const auth = createClikkleAuthClient({
clientId: import.meta.env.VITE_CLIKKLE_AUTH_CLIENT_ID,
redirectUri: `${window.location.origin}/auth/callback`,
});Create React App client file
Create one shared helper such as src/auth/clikkle.js, or connect the Client ID through your existing shared authentication module. If your app already has an IdentityArrival/Auth layer, integrate there rather than replacing the Login page wrapper.
// src/auth/clikkle.js
import { createClikkleAuthClient } from "@clikkle/auth";
export const auth = createClikkleAuthClient({
clientId: process.env.REACT_APP_CLIKKLE_AUTH_CLIENT_ID,
redirectUri: `${window.location.origin}/auth/callback`,
});Next.js client file
Create a shared client-side Auth helper in your existing auth/lib area. Keep server secrets separate; the public Client ID is not a client secret.
// src/lib/clikkle-auth.ts
import { createClikkleAuthClient } from "@clikkle/auth";
export const auth = createClikkleAuthClient({
clientId: process.env.NEXT_PUBLIC_CLIKKLE_AUTH_CLIENT_ID!,
redirectUri: `${window.location.origin}/auth/callback`,
});Connect your existing sign-in UI
Import the shared Auth client into the authentication layer that already owns sign-in. Do not replace an existing login architecture just to follow a sample. The sign-in action should start the SDK authorization flow and preserve the intended return destination.
Handle the callback
Your registered /auth/callback route must complete the SDK callback flow, validate the authorization transaction, remove temporary authorization parameters, and continue to the intended application route. See Callback handling for the exact flow.
Restart and test
Restart the development server after changing build-time environment variables. Complete one sign-in and confirm you return through the exact callback registered in Console. For production builds, rebuild and redeploy after changing frontend environment variables.