Frontend Integration

🔑 Before You Begin - Request Your Credentials

If you have not yet received your ClientID and Secret Key, you can request access here:

📘

Request Integration Credentials

Contact your Wink representative or submit a request through your onboarding link.

Choose the integration guide that matches your technology stack:

• React — React JS Starter Kit (Vite + TypeScript)
• Next.js — Next.js Starter Kit
• Vanilla JS — Vanilla JS Starter Kit (plain HTML + JS or with a bundler)

Common Requirements

All integrations require:

• Backend API that:
  • Creates the Wink session (e.g. GET /session?returnUrl=...&cancelUrl=...) and returns a sessionId. Session creation must be done server-side; never call the Wink Session API or expose clientSecret in the browser.
  • Returns user profile after authentication (e.g. GET /user) using the token from the client.

📘

Read the Backend Integration guide for server-side setup, and explore the Starter Kits to get up and running quickly.

• Configuration (from Wink):
  • Client-side: clientId, realm, base/auth URLs (e.g. VITE_WINK_CLIENT_ID, VITE_WINK_REALM, VITE_WINK_BASE_URL, VITE_WINK_AUTH_URL).
  • Server-side only: clientSecret and any credentials used to call the Wink Session API.
• HTTPS in production.

Each guide includes setup steps, code examples, and security practices for that stack.

Additional Resources

• Wink Button Styles
• Wink Identity Web SDK (NPM)