{"id":31542541,"url":"https://github.com/zitadel/zitadel-vanilla-js","last_synced_at":"2026-02-15T00:30:58.085Z","repository":{"id":316782272,"uuid":"1064756603","full_name":"zitadel/zitadel-vanilla-js","owner":"zitadel","description":"Simple vanilla JS SPA demonstrating authentication with Zitadel using OIDC.","archived":false,"fork":false,"pushed_at":"2025-10-31T15:10:35.000Z","size":349,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-31T17:16:32.311Z","etag":null,"topics":["vanilla-js","zitadel"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zitadel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-26T14:03:02.000Z","updated_at":"2025-10-31T15:10:39.000Z","dependencies_parsed_at":"2025-09-26T18:24:17.329Z","dependency_job_id":"470cb940-78a9-43d0-aa9a-d635cebf0ac3","html_url":"https://github.com/zitadel/zitadel-vanilla-js","commit_stats":null,"previous_names":["zitadel/zitadel-vanilla-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zitadel/zitadel-vanilla-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-vanilla-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-vanilla-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-vanilla-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-vanilla-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zitadel","download_url":"https://codeload.github.com/zitadel/zitadel-vanilla-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-vanilla-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29461911,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T22:42:09.113Z","status":"ssl_error","status_checked_at":"2026-02-14T22:42:05.053Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vanilla-js","zitadel"],"created_at":"2025-10-04T11:59:05.213Z","updated_at":"2026-02-15T00:30:58.079Z","avatar_url":"https://github.com/zitadel.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![ZitadelJS](assets/zitadel-js.svg)\n\n# Zitadel JS Quickstart\n\nThis is a simple vanilla JS SPA demonstrating authentication with **Zitadel** using OIDC.\nThis app uses [oidc-client-ts](https://github.com/authts/oidc-client-ts) to handle OpenID Connect login flows.\n\n---\n\n## Prerequisites\n\n- Node.js installed on your machine\n- A **Zitadel** instance\n\n---\n\n## Setup Instructions\n\n1. **Log into the Zitadel Customer Portal**  \n   Go to the [Zitadel Customer Portal](https://zitadel.com/admin/dashboard)\n\n2. **Create an Instance**  \n   - Choose a region and create your new instance.\n\n3. **Create a Project**  \n   - Inside your instance, go to Projects -\u003e Create New Project\n\n![App Screenshot](assets/new_project.png)\n\n4. **Create an Application**  \n   - New **\"User Agent\"**\n   - Select **\"PKCE\"**\n   - Enable **\"Development Mode\"**\n   - Configure your **Redirect URI** and **Post Logout URI** (`http://localhost:4000` for local testing)\n   - Click **\"Continue\"** and **\"Create\"**\n   - Copy the **\"Client ID\"**\n\n![App Screenshot](assets/new_application.png)\n\n5. **Change your token type to `JWT` in your application settings**  \n\n![App Screenshot](assets/token_settings.png)\n\n6. **Configure `auth.js`**  \n   - Open `public/js/auth.js` and replace the placeholder values with your application info:\n\n```js\nconst config = {\n    authority: 'https://CUSTOM_DOMAIN',  // Your Zitadel instance\n    client_id: 'CLIENT_ID',                        // Client ID from Zitadel\n    redirect_uri: 'http://localhost:4000',             // Redirect URI you set in Zitadel\n    post_logout_redirect_uri: 'http://localhost:4000', // Optional logout redirect URL\n    response_type: 'code',\n    scope: 'openid profile email',                     // Scopes you want\n    code_challenge_method: 'S256'\n};\n```\n\n7. **Run `npm install \u0026 npm start`**  \n\n## Enable Offline Access (Refresh Tokens)\n\nTo retrieve a refresh token for offline access, follow these steps:\n\n1. Enable refresh tokens for your application:  \n   - Navigate to your [application settings](https://zitadel.com/docs/guides/manage/console/applications#application-settings) and enable the **Refresh Token** checkbox.\n\n2. Add the `offline_access` scope:\n\n```js\nconst config = {\n    authority: 'https://CUSTOM_DOMAIN',\n    client_id: 'CLIENT_ID',                    \n    redirect_uri: 'http://localhost:4000',           \n    post_logout_redirect_uri: 'http://localhost:4000',\n    response_type: 'code',\n    scope: 'openid profile email offline_access',                   \n    code_challenge_method: 'S256'\n};\n```\n\n3. After logging out and logging back in, you will see the refresh token container displaying the refresh token.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzitadel%2Fzitadel-vanilla-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzitadel%2Fzitadel-vanilla-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzitadel%2Fzitadel-vanilla-js/lists"}