DEV Community

Cover image for Manage and Authenticate Users with Netlify Identity
Tara Z. Manicsic for Netlify

Posted on • Originally published at netlify.com

3 2

Manage and Authenticate Users with Netlify Identity

Throughout December we'll be highlighting a different Netlify feature each day. It might just be the thing you need to unlock those creative juices, and dust off that domain you registered but never deployed! Keep an eye on the blog and on Twitter for each feature!

"Authenticating users is a no-brainer", said no one ever. Managing user data, creating a login process, setting roles, gating content, these things are hard. One of my favorite strategies in web app development is getting a leg up by having someone else do the hard part. After all, you can't spell 'delegation' without 'leg'.

Netlify Identity lets us delegate a ton of authentication functionality:

  • the setup and infrastructure of storing user information, as well
  • login using external OAuth providers like GitHub, Google, GitLab, and Bitbucket
  • trigger serverless functions on validation, signup, or login events
  • generate custom emails
  • access and edit user information and roles
  • and more!

screenshot of identity dashboard page

Leveraging the open-source GoTrue API, Netlify Identity can be added to your site with the Netlify Identity widget by adding this <script> tag:

<head><script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

then including the widget in the site template, like so:

 <!-- 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>
Enter fullscreen mode Exit fullscreen mode

Put it all together and you get this lovely pop-up modal window where users can login or sign up!

netlify identity login modal window

Check out the Netlify Identity docs to learn more about everything you can do. I can't wait to see (or not see if I'm not logged in) all the authentication functionality you create! Happy coding 👩🏻‍💻!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay