mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-18 05:52:51 +00:00
702e0d0447
# Which Problems Are Solved Some frameworks a user can select in the onboarding of the console are missing in the quickstart # How the Problems Are Solved - Add missing frameworks to quickstart - Astro - Django - Express.js - FastAPI - Fastify - Flask - Hono - Laravel - Nuxtjs - Qwik - SolidStart - Spring - Svelte - Update console configurations to match the example repositories - Remove console client configurations, as they all point towards an SDK which doesn't make sense with a default configuration --------- Co-authored-by: Federico Coppede <[email protected]> Co-authored-by: Copilot <[email protected]> Co-authored-by: Mridang Agarwalla <[email protected]>
83 lines
7.1 KiB
Plaintext
83 lines
7.1 KiB
Plaintext
---
|
|
title: Vue.js
|
|
sidebar_label: Vue.js
|
|
framework_url: https://vuejs.org
|
|
auth_library: oidc-client-ts
|
|
auth_library_url: https://www.npmjs.com/package/oidc-client-ts
|
|
example_repo: https://github.com/zitadel/example-auth-vuejs
|
|
auth_flow: pkce
|
|
status: stable
|
|
---
|
|
|
|
## Overview
|
|
|
|
[Vue.js](https://vuejs.org) is a progressive JavaScript framework for building user interfaces with reactive data binding, component composition, and a rich ecosystem. This example demonstrates how to integrate **Zitadel** using the **[OAuth 2.0 PKCE flow](https://oauth.net/2/pkce/)** to authenticate users securely and maintain sessions across your Vue.js application.
|
|
|
|
#### Auth library
|
|
|
|
This example uses **[vue-oidc-context](https://www.npmjs.com/package/vue-oidc-context)**, a Vue 3 wrapper around **[oidc-client-ts](https://www.npmjs.com/package/vue-oidc-context)**, a Vue 3 wrapper around **[oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts)**, which implements the [OpenID Connect](https://www.npmjs.com/package/vue-oidc-context) (OIDC) flow. The underlying [oidc-client-ts](https://www.npmjs.com/package/vue-oidc-context)**, a Vue 3 wrapper around **[oidc-client-ts](https://www.npmjs.com/package/oidc-client-ts) library manages [PKCE](https://www.npmjs.com/package/vue-oidc-context), performs token exchange, and exposes helpers for [session state](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) management.
|
|
|
|
---
|
|
|
|
## What this example demonstrates
|
|
|
|
This [Vue.js](https://vuejs.org) application showcases a complete authentication pattern using [Zitadel](https://zitadel.com/docs) with [PKCE](https://oauth.net/2/pkce/). Users begin on a public landing page where they can initiate sign-in with Zitadel's authorization server. After successful authentication, the app handles the [OAuth callback](https://zitadel.com/docs/apis/openidoauth/endpoints) and redirects users to a protected profile page displaying their [user information and claims](https://zitadel.com/docs/apis/openidoauth/claims).
|
|
|
|
The application uses [vue-oidc-context](https://www.npmjs.com/package/vue-oidc-context) to wrap authentication logic around [Vue Router](https://www.npmjs.com/package/vue-oidc-context) to wrap authentication logic around [Vue Router](https://router.vuejs.org) navigation guards, automatically protecting routes and ensuring only authenticated users can access sensitive areas. The [withAuthenticationRequired](https://www.npmjs.com/package/vue-oidc-context) to wrap authentication logic around [Vue Router](https://router.vuejs.org) navigation guards, automatically protecting routes and ensuring only authenticated users can access sensitive areas. The [withAuthenticationRequired](https://github.com/authts/vue-oidc-context#protecting-routes) higher-order component secures individual routes by checking [session state](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) before rendering protected views.
|
|
|
|
The example includes secure sign-out functionality implementing **[federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** through Zitadel's [end-session endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints#end_session_endpoint), which terminates both the local application session and the Zitadel session. The app demonstrates proper handling of [refresh tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token_endpoint) using the `offline_access` [scope](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** through Zitadel's [end-session endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints#end-session-endpoint), which terminates both the local application session and the Zitadel session. The app demonstrates proper handling of [refresh tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token-endpoint) using the `offline_access` [scope](https://zitadel.com/docs/apis/openidoauth/scopes), and includes comprehensive [error handling](https://zitadel.com/docs/guides/integrate/login/oidc/logout)** through Zitadel's [end-session endpoint](https://zitadel.com/docs/apis/openidoauth/endpoints#end-session-endpoint), which terminates both the local application session and the Zitadel session. The app demonstrates proper handling of [refresh tokens](https://zitadel.com/docs/apis/openidoauth/endpoints#token-endpoint) using the `offline_access` [scope](https://zitadel.com/docs/apis/openidoauth/scopes), and includes comprehensive [error handling](https://github.com/authts/vue-oidc-context#error-handling) for authentication failures.
|
|
|
|
---
|
|
|
|
## Getting started
|
|
|
|
### Prerequisites
|
|
|
|
Before running this example, you need to create and configure a PKCE application in the [ZITADEL Management Console](https://zitadel.com/docs/guides/manage/console/overview). Follow the PKCE application setup guide to:
|
|
|
|
1. Create a new Web application in your [Zitadel project](https://zitadel.com/docs/guides/manage/console/projects)
|
|
2. Configure it to use the PKCE authentication method
|
|
3. Set up your redirect URIs (e.g., `http://localhost:3000/auth/callback` for development)
|
|
4. Configure post-logout redirect URIs (e.g., `http://localhost:3000`)
|
|
5. Copy your **Client ID** for use in the next steps
|
|
|
|
> **Note:** Make sure to enable **Dev Mode** in the [ZITADEL Management Console](https://zitadel.com/docs/guides/manage/console/overview) if you're using HTTP URLs during local development. For production, always use HTTPS URLs and disable Dev Mode.
|
|
|
|
### Run the example
|
|
|
|
Once you have your [Zitadel application configured](https://zitadel.com/docs/guides/integrate/login/oidc/login-users), follow these steps:
|
|
|
|
1. Clone the [repository](https://github.com/zitadel/example-auth-vuejs).
|
|
2. Create a `.env` file in the project root and configure it with the values from your [Zitadel application](https://zitadel.com/docs/guides/manage/console/applications):
|
|
```
|
|
VITE_ZITADEL_DOMAIN=https://your-instance.zitadel.cloud
|
|
VITE_ZITADEL_CLIENT_ID=your_client_id_from_console
|
|
VITE_ZITADEL_CALLBACK_URL=http://localhost:3000/auth/callback
|
|
VITE_ZITADEL_POST_LOGOUT_URL=http://localhost:3000
|
|
VITE_POST_LOGIN_URL=/profile
|
|
```
|
|
Replace these values with:
|
|
- Your actual [Zitadel instance URL](https://zitadel.com/docs/guides/manage/console/default-settings) (the **Issuer**)
|
|
- The **Client ID** you copied when creating the application in the PKCE setup
|
|
- The **redirect URI** you configured (must match exactly)
|
|
- The **post-logout redirect URI** for [federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)
|
|
3. Install dependencies using [npm](https://www.npmjs.com) and start the development server:
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
---
|
|
|
|
## Learn more and resources
|
|
|
|
* [PKCE concept](https://oauth.net/2/pkce/)
|
|
* [Federated logout](https://zitadel.com/docs/guides/integrate/login/oidc/logout)
|
|
* [OIDC integration guide](https://zitadel.com/docs/guides/integrate/login/oidc/login-users)
|
|
* [Vue.js documentation](https://vuejs.org)
|
|
* [Vue Router documentation](https://router.vuejs.org)
|
|
* [vue-oidc-context (wrapper)](https://www.npmjs.com/package/vue-oidc-context)
|
|
* [oidc-client-ts (primary library)](https://www.npmjs.com/package/oidc-client-ts)
|
|
* [oidc-client-ts GitHub](https://github.com/authts/oidc-client-ts)
|
|
* [Example repository](https://github.com/zitadel/example-auth-vuejs)
|