<!DOCTYPE html>
<html>
<head>
  <title>A static website</title>

  <!-- include the widget -->
  <script defer type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <!-- Add a menu:
   Log in / Sign up - when the user is not logged in
   Username / Log out - when the user is logged in
  -->
  <div data-netlify-identity-menu></div>

  <!-- Add a simpler button:
    Simple button that will open the modal.
  -->
  <div data-netlify-identity-button>Login with Netlify Identity</div>
</body>
</html>

The widget will automatically attach itself to the window object as window.netlifyIdentity.

You can use this global object like this:

 // open the modal
netlifyIdentity.open()

// Get the current user:
const user = netlifyIdentity.currentUser();

// Bind to events
netlifyIdentity.on('init', user => console.log(user))
netlifyIdentity.on('login', user => console.log(user))
netlifyIdentity.on('logout', () => console.log("Logged out"))
netlifyIdentity.on('error', err => console.error("Logged out"))
netlifyIdentity.on('open', () => console.log("Widget opened"))
netlifyIdentity.on('close', () => console.log("Widget closed"))

// Close the modal
loginModal.close()

// Logout the user
loginModal.logout();

Module API

Netlify Identity Widget also has a module api:

yarn add netlify-identity-widget

Import or require as usual:

import NetlifyIdentity from "netlify-identity-widget"
// or
const netlifyIdentity = require("netlify-identity-widget");

netlifyIdentity.init({
  container: "#netlify-modal" // defaults to document.body
});

identity.open() // open the modal

identity.on('init', user => console.log(user))
identity.on('login', login => console.log(user))
identity.on('logout', () => console.log("Logged out"))
identity.on('error', err => console.error("Logged out"))
identity.on('open', () => console.log("Widget opened"))
identity.on('close', () => console.log("Widget closed"))

// Close the modal
identity.close()

// Logout the user
loginModal.logout();

// Access the underlying gotrue instance.
// Note that doing things directly through gotrue brings a risk of getting out of
// sync between your state and the widgets state.
identity.gotrue

Localhost

When using the widget on localhost, it will prompt for your Netlify SiteURL the first time it is opened.

This allows the widget to know which instance of Netlify Identity it should communicate with with zero configuration.

v1.0.0 - 2017-09-08

Merged

Draft release doc #63
Also make sure we can still build. #64
Add init event to netlifyIdentity #62
Replace GitHub ribbon with simpler link #61
Don’t kick off loading state when linking to providers #59
Add links/badges to demo site #60
Release with more fixes #58
Enable providers on accept invite page #56
Turn off hmr in devmode #52
Upgrade gotrue-js #55
Created new release for version v1 #54
Enable travis #51
console.error instead of log #50
Fix lint/format #45
Fix logged in state styling #44
Demo page refactor #43
Fix readme #41
[WIP] Style Dev Mode #31
Fix race condition on currentUser call #38
Fix remaining listing errors. Prettier should work now. #35
Add aria-hidden attribute to dialog #36
Fix viewport warnings on safari #33
Add some css to the template so rafa can go play later #32
Fix a race condition #34
Remove unused packages and fix lint errors #30

Fixed

Don’t kick off loading state when linking to providers #47

Commits

Fix format of webpack config 4094ce8
Add styling to markup a9c5fc7
Use recommended rules, disable prettier-eslint a3616aa

Keywords

FAQs

What is netlify-identity-widget?

Is netlify-identity-widget popular?

Is netlify-identity-widget well maintained?

Package last updated on 08 Sep 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install