{"id":13516873,"url":"https://github.com/netlify/netlify-identity-widget","last_synced_at":"2025-05-14T00:05:31.909Z","repository":{"id":37336472,"uuid":"101684472","full_name":"netlify/netlify-identity-widget","owner":"netlify","description":"A zero config, framework free Netlify Identity widget","archived":false,"fork":false,"pushed_at":"2025-04-10T09:02:07.000Z","size":7940,"stargazers_count":784,"open_issues_count":140,"forks_count":237,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-04-10T10:42:11.428Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://identity.netlify.com","language":"JavaScript","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/netlify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-28T20:23:39.000Z","updated_at":"2025-04-08T16:25:11.000Z","dependencies_parsed_at":"2023-02-06T11:15:50.020Z","dependency_job_id":"84b1eec2-39f6-4fc1-a8a7-8df41d0de93a","html_url":"https://github.com/netlify/netlify-identity-widget","commit_stats":{"total_commits":424,"total_committers":51,"mean_commits":8.313725490196079,"dds":0.7075471698113207,"last_synced_commit":"590fd9b1fde9e4f401e72b545800502ca34a5b7b"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlify%2Fnetlify-identity-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlify%2Fnetlify-identity-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlify%2Fnetlify-identity-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlify%2Fnetlify-identity-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netlify","download_url":"https://codeload.github.com/netlify/netlify-identity-widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248205879,"owners_count":21065185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-08-01T05:01:26.723Z","updated_at":"2025-04-12T11:45:24.520Z","avatar_url":"https://github.com/netlify.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Auth","HTML"],"sub_categories":["Providers"],"readme":"![Netlify Identity Widget](identity.png)\n\n[![npm version](https://badge.fury.io/js/netlify-identity-widget.svg)](https://badge.fury.io/js/netlify-identity-widget)\n\nA component used to authenticate with Netlify's Identity service.\n\n[Live demo](https://identity.netlify.com)\n\nFor usage example with React and React Router, please see our `/example` folder and [read the README](https://github.com/netlify/netlify-identity-widget/tree/master/example).\n\n## What is Netlify Identity\n\nNetlify's Identity service is a plug-and-play microservice for handling site\nfunctionalities like signups, logins, password recovery, user metadata, and\nroles. You can use it from single page apps instead of rolling your own, and\nintegrate with any service that understands JSON Web Tokens (JWTs).\n\nLearn more about this service from this\n[blog post](https://www.netlify.com/blog/2017/09/07/introducing-built-in-identity-service-to-streamline-user-management/).\n\n## Usage\n\nSimply include the widget on your site, and things like invites, confirmation\ncodes, etc, will start working.\n\nYou can add controls for the widget with HTML:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eA static website\u003c/title\u003e\n\n  \u003c!-- include the widget --\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://identity.netlify.com/v1/netlify-identity-widget.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- Add a menu:\n   Log in / Sign up - when the user is not logged in\n   Username / Log out - when the user is logged in\n  --\u003e\n  \u003cdiv data-netlify-identity-menu\u003e\u003c/div\u003e\n\n  \u003c!-- Add a simpler button:\n    Simple button that will open the modal.\n  --\u003e\n  \u003cdiv data-netlify-identity-button\u003eLogin with Netlify Identity\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe widget will automatically attach itself to the window object as\n`window.netlifyIdentity`.\n\nYou can use this global object like this:\n\n```js\n// Open the modal\nnetlifyIdentity.open();\n\n// Get the current user:\n// Available after on('init') is invoked\nconst user = netlifyIdentity.currentUser();\n\n// Bind to events\nnetlifyIdentity.on('init', user =\u003e console.log('init', user));\nnetlifyIdentity.on('login', user =\u003e console.log('login', user));\nnetlifyIdentity.on('logout', () =\u003e console.log('Logged out'));\nnetlifyIdentity.on('error', err =\u003e console.error('Error', err));\nnetlifyIdentity.on('open', () =\u003e console.log('Widget opened'));\nnetlifyIdentity.on('close', () =\u003e console.log('Widget closed'));\n\n// Unbind from events\nnetlifyIdentity.off('login'); // to unbind all registered handlers\nnetlifyIdentity.off('login', handler); // to unbind a single handler\n\n// Close the modal\nnetlifyIdentity.close();\n\n// Log out the user\nnetlifyIdentity.logout();\n\n// Refresh the user's JWT\n// Call in on('login') handler to ensure token refreshed after it expires (1hr)  \n// Note: this method returns a promise.\nnetlifyIdentity.refresh().then((jwt)=\u003econsole.log(jwt))\n\n// Change language\nnetlifyIdentity.setLocale('en');\n```\n\n#### A note on script tag versioning\n\nThe `v1` in the above URL is not pinned to the major version of the module API,\nand will only reflect breaking changes in the markup API.\n\n### Module API\n\nNetlify Identity Widget also has a\n[module API](https://www.npmjs.com/package/netlify-identity-widget):\n\n```bash\nyarn add netlify-identity-widget\n```\n\nImport or require as usual:\n\n```js\nconst netlifyIdentity = require('netlify-identity-widget');\n\nnetlifyIdentity.init({\n  container: '#netlify-modal', // defaults to document.body\n  locale: 'en' // defaults to 'en'\n});\n\nnetlifyIdentity.open(); // open the modal\nnetlifyIdentity.open('login'); // open the modal to the login tab\nnetlifyIdentity.open('signup'); // open the modal to the signup tab\n\nnetlifyIdentity.on('init', user =\u003e console.log('init', user));\nnetlifyIdentity.on('login', user =\u003e console.log('login', user));\nnetlifyIdentity.on('logout', () =\u003e console.log('Logged out'));\nnetlifyIdentity.on('error', err =\u003e console.error('Error', err));\nnetlifyIdentity.on('open', () =\u003e console.log('Widget opened'));\nnetlifyIdentity.on('close', () =\u003e console.log('Widget closed'));\n\n// Unbind from events\nnetlifyIdentity.off('login'); // to unbind all registered handlers\nnetlifyIdentity.off('login', handler); // to unbind a single handler\n\n// Close the modal\nnetlifyIdentity.close();\n\n// Log out the user\nnetlifyIdentity.logout();\n\n// refresh the user's JWT\n// Note: this method returns a promise.\nnetlifyIdentity.refresh().then((jwt)=\u003econsole.log(jwt))\n\n// Change language\nnetlifyIdentity.setLocale('en');\n\n// Access the underlying GoTrue JS client.\n// Note that doing things directly through the GoTrue client brings a risk of getting out of\n// sync between your state and the widget’s state.\nnetlifyIdentity.gotrue;\n```\n\n#### `netlifyIdentity.init([opts])`\n\nYou can pass an optional `opts` object to configure the widget when using the\nmodule API. Options include:\n\n```js\n{\n  container: '#some-query-selector'; // container to attach to\n  APIUrl: 'https://www.example.com/.netlify/functions/identity'; // Absolute url to endpoint.  ONLY USE IN SPECIAL CASES!\n  namePlaceholder: 'some-placeholder-for-Name'; // custom placeholder for name input form\n  locale: 'en'; // language code for translations - available: en, fr, es, pt, hu, pl, cs, sk - default to en\n```\n\nGenerally avoid setting the `APIUrl`. You should only set this when your app is\nserved from a domain that differs from where the identity endpoint is served.\nThis is common for Cordova or Electron apps where you host from localhost or a\nfile.\n\n## Localhost\n\nWhen using the widget on localhost, it will prompt for your Netlify SiteURL the\nfirst time it is opened. Entering the siteURL populates the browser's\nlocalStorage.\n\nThis allows the widget to know which instance of Netlify Identity it should\ncommunicate with zero configuration.\n\nE.g. If your Netlify site is served from the `olddvdscreensaver.com` domain\nname, enter the following when prompted by the widget when in development mode:\n\n```\nhttps://olddvdscreensaver.com\n```\n\n![](devmode.png)\n\n## List of Alternatives\n\n**Lowest level JS Library**: If you want to use the official Javascript bindings to GoTrue, Netlify's underlying Identity service written in Go, use https://github.com/netlify/gotrue-js\n\n**React bindings**: If you want a thin wrapper over Gotrue-js for React, `react-netlify-identity` is a \"headless\" library, meaning there is no UI exported and you will write your own UI to work with the authentication. https://github.com/sw-yx/react-netlify-identity\n\n**High level overlay**: If you want a \"widget\" overlay that gives you a nice UI out of the box, with a somewhat larger bundle, check https://github.com/netlify/netlify-identity-widget\n\n**High level popup**: If you want a popup window approach also with a nice UI out of the box, and don't mind the popup flow, check https://github.com/netlify/netlify-auth-providers\n\nYou can also see an example of wrapping netlify-identity-widget in a React Hook here: https://github.com/sw-yx/netlify-fauna-todo/blob/master/src/hooks/useNetlifyIdentity.js\n\n## FAQ\n\n* TypeScript Typings are maintained by @nkprince007 ([see PR](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/30689)): `npm install @types/netlify-identity-widget` and then `import * as NetlifyIdentityWidget from \"netlify-identity-widget\"` (or `import NetlifyIdentityWidget from \"netlify-identity-widget\"` if you have `--allowSyntheticDefaultImports` on)\n\n* If you experience a 404 while testing the Netlify Identity Widget on a local\n  environment, you can manually remove the `netlifySiteURL` from localStorage by\n  doing the following in the console.\n\n```js\nlocalStorage.removeItem('netlifySiteURL');\n```\n\n* See the `example` for how to integrate this widget with a react app.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetlify%2Fnetlify-identity-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetlify%2Fnetlify-identity-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetlify%2Fnetlify-identity-widget/lists"}