Authenticating Visitors with Netlify Identity

In this tutorial, we will show you how to allow visitors of your website to register with you, and log in to and out from your site. We’ll use Netlify’s Identity service for this, a rich, yet easy-to-set-up authentication solution. Integrated into your Scrivito-based app, the identity service adds sign-up functionality (optionally via third-party platforms such as GitHub or Google) as well as invitation, authentication and password recovery services to your site without requiring your users to create a Netlify account or use any other service.

Netlify Identity needs to be explicitly enabled for a deployed live website, but you can still test it out in your local development environment without having to deploy after each and every change.

Activate the Netlify Identity Service

We are assuming that you already claimed your site on Netlify via your Scrivito dashboard and have your Example App running locally (after downloading it or cloning it from GitHub). To get started, proceed as follows:

1Make sure your site is encrypted

HTTPS is a must if you want to use the Identity service. HTTPS is active after the initial automatic deployment to Netlify, and remains active unless you changed to a custom domain. In this case, enable HTTPS via the “Domain management” settings of your site if you haven’t already done so.

2Enable Netlify Identity for your site

In your “Identity” website settings, enable the Identity service. On this occasion, select the third-party platforms you want to offer visitors for registering with.

3Enable “Autoconfirm” for sign-ups

In the “Email templates” section of the “Identity” settings, for the (sign-up) “Confirmation” part, set “Autoconfirm” to “yes” to be able to start quickly without deployments. “Autoconfirm” means that a user who signed up is not sent an email containing a confirmation link that needs to be clicked to confirm the sign-up (double opt-in). Later on, when your site is production-ready, you can include nice email templates and make the links in them point to confirmation pages in your app. We are omitting this here to keep this tutorial lean.

Installing the Netlify Identity Widget

Netlify Identity can be integrated into static HTML files as well as single-page apps based on React such as websites built with Scrivito. For handling all user interaction, the ”Netlify Identity Widget” (repository) is available. It lets you open a form for signing up, logging in, etc., react to user actions via events, and access the data associated with the currently logged-in user.

To add the Identity Widget as a module to your Scrivito-based app, switch to your app directory and enter:

Copy
$ npm install --save-dev netlify-identity-widget

Import the library at the root level

The Identity Widget needs to imported and initialized at the root level of your app to be able to handle sign-up confirmation codes (after switching sign-up confirmation on again later). It attaches itself to the window object as window.netlifyIdentity.

src/index.js (imported by public/index.html)
Copy
// Other imports
import netlifyIdentity from 'netlify-identity-widget';

// Make netlifyIdentity accessible in the browser console
window.netlifyIdentity = netlifyIdentity;

netlifyIdentity.init();

ReactDOM.render(<App />, document.getElementById('application'));

The netlifyIdentity object provides us with all the functionality we need to render page content depending on whether the visitor is logged in or not.

Providing an authentication component

Let’s give our website visitors a means for signing up, logging in and out, i.e. utilize the Identity service. For this, we could create an authentication widget that Scrivito editors could place on any page. However, controls associated with authentication should be and are mostly made accessible everywhere on the website. So let’s make the links show up where the main navigation resides, at the top of every page. For this, we’ll encapsulate a “Sign up | Log in” link in a React component and render it in one of the Example App’s navigation components.

The purpose of our “NetlifyAuth” component is to render a link for either opening the Netlify Identity Widget’s form for signing up and logging in, or for logging the user off. It handles clicks on the links as well as the Identity widget’s “login” and “logout” events. The handlers of the latter events change a state variable, loggedIn, to cause the component to update after logging in or out.

src/Components/NetlifyAuth.js
Copy
import * as React from 'react';
import * as Scrivito from 'scrivito';
import netlifyIdentity from 'netlify-identity-widget';

class NetlifyAuth extends React.Component {
  constructor(props) {
    super(props);

    this.handleLogInClick = this.handleLogInClick.bind(this);
    this.handleLogOutClick = this.handleLogOutClick.bind(this);
    this.state = { loggedIn: false };
  }

  handleLogInClick() {
    netlifyIdentity.open();
  }

  handleLogOutClick() {
    netlifyIdentity.logout();
  }

  afterLogIn() {
    netlifyIdentity.close();
    this.setState({ loggedIn: true });
  }

  componentDidMount() {
    netlifyIdentity.on("login", () => this.afterLogIn());
    netlifyIdentity.on("logout", () => this.setState({ loggedIn: false }));
  }

  render() {
    const user = netlifyIdentity.currentUser();
    if (!user) {
      return (
        <a href="#" onClick={ this.handleLogInClick }>Sign up | Log in</a>
      );
    }
    return (
      <a href="#" onClick={ this.handleLogOutClick }>Log out { user.email }</a>
    );
  }
}

export default NetlifyAuth;

Note that the render function does not use the loggedIn state but netlifyIdentity.currentUser instead to determine which link it should render. This is the way to go because the state variable doesn’t survive a page reload, while the Identity Widget and hence its currentUser does. As mentioned, the state is only used to have the component rerendered after logging in or out.

Note also that currently there is no means to unregister event handlers passed in via netlifyIdentity.on. For this reason, no componentWillUnmount callback has been provided for doing this.

Rendering the authentication component

Now that we have the authentication component in place, let’s render it as part of the top navigation of the Scrivito Example App. This navigation is made up of several components; we’ve chosen to add the component to “FullNavigation.js” because it also renders the logo and the search icon.

First, import the NetlifyAuth component:

src/Components/Navigation/FullNavigation.js
Copy
// Other imports
import NetlifyAuth from '../NetlifyAuth';

Then, in the render function, place the component between the Logo and the SearchIcon components, like so:

Copy
// …
render() {
// …
      <Logo scrolled={ scrolled } navigationStyle={ navigationStyle } />
      <ul className="nav navbar-nav">
        <li>
          <NetlifyAuth />
        </li>
      </ul>
      <SearchIcon toggleSearch={ toggleSearch } />
// …
}

After reloading the page, you should see the “Sign up | Log in” link on the left hand side of the navigation. If you are working locally, clicking this link for the first time causes the Netlify Identity widget to ask for the URL of your live website (the one for which Netlify Identity has been activated):

After specifying the URL (e.g. “https://my-cool-stuff.netlify.com/”), the “Sign up | Log in” dialog opens and you can start testing.

If you need to change the URL of your live website later on, execute the following in the browser console:

Copy
localStorage.removeItem("netlifySiteURL");

Managing users

You can manage the users who signed up on your website in the website’s “Identity” section. At the time of writing, you can change a user’s name and email address, assign roles, or delete the user here.

Roles work similar to tags. Defining and assigning them to users allows you to utilize them for making decisions in your app’s logic. You could show or hide specific content, or address users depending on the presence of a role or a combination of roles, for example.

Inspecting the currentUser

To learn about the structure of a logged-in user’s data, e.g. their roles or other metadata, execute netlifyIdentity.currentUser() in the browser console and inspect the returned object.

What’s next?

The Netlify Identity widget comes with an easy-to-handle user interface, i.e. a dialog box for signing up, logging in, etc. Once integrated, the widget allows you to render page content and make decisions based on whether a user is logged in and, if so, on the data associated with them, e.g. their roles.

If you want to take some useful action after a user has logged in, you could do this by extending the afterLogIn event handler function. How about taking the user to a specific page using Scrivito.navigateTo?

Consider persisting the current user in the browser’s local storage. See How to add Netlify Identity service to React projects for details.

Last but not least, if you want to build your own forms and logic for signing up, logging in, etc., take a look at Netlify’s gotrue-js library which lets you interact programmatically with the Identity service.