{"id":44974189,"url":"https://github.com/fleek-platform/login-button","last_synced_at":"2026-02-18T16:30:35.552Z","repository":{"id":270824771,"uuid":"902942543","full_name":"fleek-platform/login-button","owner":"fleek-platform","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-22T17:29:19.000Z","size":954,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-10-23T07:07:03.479Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fleek-platform.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-12-13T15:34:33.000Z","updated_at":"2025-05-25T19:20:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"2a19119f-8763-479d-af3d-7398bbab89eb","html_url":"https://github.com/fleek-platform/login-button","commit_stats":null,"previous_names":["fleek-platform/login-button"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fleek-platform/login-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleek-platform%2Flogin-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleek-platform%2Flogin-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleek-platform%2Flogin-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleek-platform%2Flogin-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fleek-platform","download_url":"https://codeload.github.com/fleek-platform/login-button/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fleek-platform%2Flogin-button/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29585531,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T13:56:48.962Z","status":"ssl_error","status_checked_at":"2026-02-18T13:54:34.145Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":[],"created_at":"2026-02-18T16:30:32.391Z","updated_at":"2026-02-18T16:30:35.543Z","avatar_url":"https://github.com/fleek-platform.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](.repo/images/repo/banner.png?202409201714)\n\n# ⚡️Fleek Login Button\n\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-blue.svg)](https://conventionalcommits.org)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nThe Fleek Login Button provides standalone authentication button component with an embedded modal that functions independently of host application.\n\n`authToken` obtained via [Dynamic](https://docs.dynamic.xyz/react-sdk/overview) dialog is exchanged for an `accessToken` using the `generateUserSessionDetails` mutation. The `accessToken` is then stored as a cookie with the same name. Any app under the hostname can read the cookie and use it to perform GraphQL requests.\n\n## Overview\n\n- [🤖 Install](#install)\n- [👷‍♀️Development](#development)\n  - [Environment Variables](#environment-variables)\n  - [Local Package Test](#local-package-test)\n  - [Code format](#code-format)\n  - [Changeset](#changeset)\n- [🧸 Basic Usage](#basic-usage)\n  - [Reading auth cookie](#reading-auth-cookie)\n- [📋 Additional Notes](#additional-notes)\n- [📖 Docs](https://fleek.xyz/docs/sdk)\n- [🚀 Package Release](#package-release)\n  - [Release by develop hash](#release-by-develop-hash)\n  - [Override organisation registry](#override-organisation-registry)\n  - [Create a private GHCR Token](#create-a-private-ghcr-token)\n- [🙏 Contributing](#contributing)\n  - [Branching strategy](#branching-strategy)\n  - [Contributing](#conventional-commits)\n- [⏱️ Changelog](./CHANGELOG.md)\n\n## Requirements\n\n- Nodejs as runtime\n- NPM, Yarn to install the SDK, or PNPM for development\n- Familiarity with Nodejs, Frontend/Client side development\n\n## Install\n\nInstall the package by executing:\n\n```sh\nnpm i @fleek-platform/login-button\n```\n\n⚠️ If you're planning to contribute as a developer, you must install [pnpm](https://pnpm.io), otherwise most commands will fail.\n\nFor a quick start, learn the [basic usage](#basic-usage).\n\n## Development\n\nFor developers looking to contribute to the `@fleek-platform/login-button`, [clone](https://github.com/fleekxyz/login-button) the repository and follow the [contribution guide](#contributing).\n\nFor runtime we utilize [Nodejs](https://nodejs.org/en/download) and [PNPM](https://pnpm.io/installation) as the package manager.\n\nNext, install the project dependencies:\n\n```sh\npnpm i\n```\n\n### Environment variables\n\nCreate a dotenv file containing the required environment variables for development.\n\n```sh\ntouch .env\n```\n\nOpen your favourite text editor to edit the file.\n\nHere's an example for staging environent variable values:\n\n```sh\nPUBLIC_GRAPHQL_API_URL=\"https://graphql.service.fleek.xyz/graphql\"\nPUBLIC_DYNAMIC_ENVIRONMENT_ID=\"de23a5f0-aaa5-412e-8212-4fb056a3b30d\"\nPUBLIC_DASHBOARD_APP_URL=\"https://fleek.xyz/dashboard\"\nPUBLIC_UI_AGENTS_APP_URL=\"https://fleek.xyz/agents\"\n```\n\n### Local Package Test\n\nSince npm link is a command-line tool for symlinking a local package as a dependency during development. It is commonly used for testing packages before publishing them. But it's common to cause confusion and unexpected behaviour.\n\nInstead of using `pnpm link` for local package testing, use the following command, that's closer to release install.\n\n```sh\npnpm generate:local_package\n```\n\nOnce successful, the console will display an install command that you can copy and run in your project.\n\nHere's an example that uses npm:\n\n```sh\nnpm i --no-save \u003cGENERATED_FILE_PATH\u003e\n```\n\n\u003e [!WARNING]  \n\u003e Remove concurrent package name from package.json, e.g. @fleek-platform/agents-ui. The local install doesn't save or modify the package.json. The package.json and lockfiles are only for existing registry versions. You might have to run the clean command to remove any conflicting packages from node_modules, locks, etc.\n\nAlternatively, if you're using an npm-compatible package manager like pnpm, avoid saving or modifying the lock file, e.g:\n\n```sh\nnpm_config_save=false npm_config_lockfile=false pnpm i \u003cGENERATED_FILE_PATH\u003e\n```\n\n### Changeset\n\nManage the versioning of changelog entries.\n\nDeclare an intent to release by executing the command and answering the wizard's questions:\n\n```sh\npnpm changeset:add\n```\n\n## Basic usage\n\nMake use of the exported `LoginProvider` component. Exposed props are: `login`, `logout`, `accessToken`, `isLoading` and `error`.\n\nYou need to set the following required props:\n\n```tsx\n\u003cLoginProvider\n  graphqlApiUrl=\"...\"\n  environmentId=\"...\"\n  //...\n/\u003e\n```\n\n### Example\n\nYou can import the `LoginProvider` and `useAuthStore`. The provider allows you to customize the CTA buttons, e.g. log in.\n\n```ts\nimport { LoginProvider, useAuthStore } from '@fleek-platform/login-button';\n```\n\nWhile the `useAuthStore` has actions and state, e.g. accessToken and setShowLogin.\n\n```ts\n// Use authentication store\nconst {\n  // Toggle login modal\n  setShowLogin,\n  // Trigger logout\n  setTriggerLogout,\n  // Update accessToken by Project ID\n  updateAccessTokenByProjectId,\n  // Check if newUser\n  isNewUser,\n} = useAuthStore();\n```\n\nThe `graphqlApiUrl` and `dynamicEnvironmentId` can be overriden. Otherwise, it'll default to the environment the distribution is built to target, e.g. staging or production.\n\n```tsx\n// Staging\nconst graphqlApiUrl = 'https://graphql.service.staging.fleeksandbox.xyz/graphql';\nconst dynamicEnvironmentId = 'c4d4ccad-9460-419c-9ca3-494488f8c892';\nconst onAuthenticationSuccess = () =\u003e console.log('onAuthenticationSuccess callback!');\n\n// Use Login provider\n\u003cLoginProvider\n  graphqlApiUrl={graphqlApiUrl}\n  dynamicEnvironmentId={dynamicEnvironmentId}\n  onAuthenticationSuccess={onAuthenticationSuccess}\n\u003e\n  {(props) =\u003e {\n    const { login, logout, accessToken, isLoading, error } = props;\n\n    const handleClick = () =\u003e {\n      if (Boolean(accessToken)) {\n        logout();\n      } else {\n        login();\n      }\n    };\n\n    let buttonText = 'Login with Dynamic';\n\n    switch (true) {\n      case Boolean(error):\n        buttonText = 'Login failed';\n        break;\n      case isLoading:\n        buttonText = 'Loading...';\n        break;\n      // not a real session, session is in the cookie, just for demo\n      case Boolean(accessToken):\n        buttonText = 'Log out';\n        break;\n    }\n\n    return (\n      \u003c\u003e\n        \u003cButton onClick={handleClick}\u003e{buttonText}\u003c/Button\u003e\n        {accessToken \u0026\u0026 \u003cp className=\"max-w-64 break-words mt-4\"\u003eaccessToken: {accessToken}\u003c/p\u003e}\n      \u003c/\u003e\n    );\n  }}\n\u003c/LoginProvider\u003e;\n```\n\n### Reading auth cookie\n\nTo read auth cookie value at any point `getAuthCookie()` utility is exposed. Auth cookie uses `accessToken` key.\n\n```ts\nimport { getAuthCookie } from '@fleek-platform/login-button';\n\nconst accessToken: string | undefined = getAuthCookie();\n```\n\n## Additional notes\n\nCurrently the `generateUserSessionDetails` mutation is called using a simple `fetch` call in [fetchGenerateUserSessionDetails.ts](src/graphql/fetchGenerateUserSessionDetails.ts) due to the fact that `@fleek-platform/utils-genql-client` package breaks the build. Once the issue is resolved, the existing implementation should be restored from this point in Git history [commit](https://github.com/fleek-platform/login-button/tree/5922518804e9cac498db5b23d5c7be5e191dbabe).\n\n## Package Release\n\nTLDR; Use the [Release by develop hash](#release-by-develop-hash). The **main branch** must have a linear strategy, e.g. we don't want contributors to push directly to **main**. At anytime, it should be a subset of **develop**, as we are strictly about preventing source diversion. On production release, the package should be available at [npmjs.org](https://www.npmjs.com/~fleek-platform), for staging [GitHub Registry packages (GHCR)](https://github.com/orgs/fleek-platform/packages).\n\nThe main principal to understand is that when a branch is merged into **main** or **develop**, the npm-publisher.yml workflow is triggered to publish packages to the appropriate registry.\n\nFor the main branch, packages are published to the [npmjs.org](https://www.npmjs.com/~fleek-platform) registry, ensuring they are available for public use.\n\nConversely, when changes are merged into the develop branch, packages are published to the [GitHub Registry packages (GHCR)](https://github.com/orgs/fleek-platform/packages)\n, which serves as a staging environment.\n\nThis setup allows for a clear separation between production-ready packages and those in development.\n\n### Release by develop hash\n\nYou can release to production following a linear strategy. This assumes that the convention \"main\" branch is of linear history and is a subset of the \"develop\" branch commit history. For example, the team is happy to have \"develop\" as where the latest version of the project exists, that \"main\" shouldn't diverge and only contain commits from \"develop\".\n\nUse-case examples:\n\n- The team has merged some feature branches into develop identified as commit hash \"abc123\" and want to release upto to the commit history hash \"abc123\" onto \"main\". By doing this they expect the build process to occur and deploy into the Fleek Platform\n- The team has merged several feature branches into develop identified as commit hashes `commitFeat1`, `commitFeat2` and `commitFeat3` by this historical order. It's decided to release everything in commit history until `commitFeat1`, but not `commitFeat2` and `commitFeat3`. Although, it'd be wiser to keep the feature branches in pending state as \"develop\" should always be in a ready state for testing and release as the team may want to release some quick hotfixes, etc\n\nTo release to production open the actions tab [here](https://github.com/fleek-platform/login-button/actions).\n\nSelect the \"🚀 Release by develop hash\" job in the left sidebar. Next, select the \"Run workflow\" drop-down and provide the required details, e.g. the commit hash of `develop branch` you are interested. Do note that it'll release everything up until the commit hash you select. If you have anything in develop which's not ready, that should be reverted from `develop branch`.\n\n### Override organisation registry\n\nYou can override the organisation registry in different ways. For example, you can setup a local `.npmrc` that overrides the organisation `@fleek-platform` registry.\n\nStart by changing to project directory and create or edit a .npmrc file:\n\n```sh\ntouch .npmrc\n```\n\nUse your favourite text editor and put the following content:\n\n```\n//npm.pkg.github.com/:_authToken=$PAT\n@fleek-platform:registry=https://npm.pkg.github.com\n```\n\nThe `PAT` is an environment variable for your private authentication token. An authentication token is required for GHCR Registry, as GHCR is our private registry used for testing.\n\nAlternatively, some users prefer to use the npm CLI to authenticate against the organisation scope.\n\nHere's a quick set of instructions to allow to login via NPM CLI.\n\n1) Execute the command npm login with scope and registry URL\n\n```sh\nnpm login --scope=@fleek-platform --registry=https://npm.pkg.github.com\n```\n\n2) Provide a random username, e.g. somebody\n\n```sh\nusername: somebody\n```\n\n3) Put the provided token as the user password\n\n```sh\npassword: ***\n```\n\nOnwards, your registry for `@fleek-platform` will be pointing to private GitHub Registry. Make sure that you logout after testing, as this might cause confusion.\n\n### Create a private GHCR Token\n\nVisit your GitHub user [tokens](https://github.com/settings/tokens).\n\nCreate a new token that allows you to:\n- Upload packages to GitHub Package Registry, e.g. `write:packages`\n- Download packages from GitHub Package Registry, e.g. `read:packages`\n\n## Contributing\n\nThis section guides you through the process of contributing to our open-source project. From creating a feature branch to submitting a pull request, get started by:\n\n1. Fork the project [here](https://github.com/fleekxyz/cli)\n2. Create your feature branch using our [branching strategy](#branching-strategy), e.g. `git checkout -b feat/my-new-feature`\n3. Run the tests: `pnpm test`\n4. Commit your changes by following our [commit conventions](#conventional-commits), e.g. `git commit -m 'chore: 🤖 my contribution description'`\n5. Push to the branch, e.g. `git push origin feat/my-new-feature`\n6. Create new Pull Request following the corresponding template guidelines\n\n### Branching strategy\n\nThe develop branch serves as the main integration branch for features, enhancements, and fixes. It is always in a deployable state and represents the latest development version of the application.\n\nFeature branches are created from the develop branch and are used to develop new features or enhancements. They should be named according to the type of work being done and the scope of the feature and in accordance with conventional commits [here](#conventional-commits).\n\n### Conventional commits\n\nWe prefer to commit our work following [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) conventions. Conventional Commits are a simple way to write commit messages that both people and computers can understand. It help us keep track fo changes in a consistent manner, making it easier to see what was added, changed, or fixed in each commit or update.\n\nThe commit messages are formatted as **[type]/[scope]**\nThe **type** is a short descriptor indicating the nature of the work (e.g., feat, fix, docs, style, refactor, test, chore). This follows the conventional commit types.\n\nThe **scope** is a more detailed description of the feature or fix. This could be the component or part of the codebase affected by the change.\n\nHere's an example of different conventional commits messages that you should follow:\n\n```txt\ntest: 💍 Adding missing tests\nfeat: 🎸 A new feature\nfix: 🐛 A bug fix\nchore: 🤖 Build process or auxiliary tool changes\ndocs: 📝 Documentation only changes\nrefactor: 💡 A code change that neither fixes a bug or adds a feature\nstyle: 💄 Markup, white-space, formatting, missing semi-colons...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffleek-platform%2Flogin-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffleek-platform%2Flogin-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffleek-platform%2Flogin-button/lists"}