[Support Guide] How do I customize the look of my login widget?

Last reviewed: September 2023

Right now the netlify-identity-widget doesn’t support theming. However, it is an open source project, so you are free to fork it and change the appearance to your heart’s desire. If you do, please let us know so we can link to it! :grinning: Also, pull requests to support more advanced configuration in the widget are very much welcome! We have some examples here, and we’d be super happy to receive any new contributions: be they docs, new features, or bug fixes.

Another option is to build your own UI on top of the gotrue-js library that the netlify-identity-widget is built on. It’s actually gotrue-js that’s making all the API calls to the Identity API backend when you use the widget. Try it out! If it needs additional documentation or fixes, we’d love to know, though we aren’t able to consult in depth on implementation.

Pro Tip: You can make API calls to Identity from inside of Netlify functions. In fact, you can also make admin calls, which you can’t do from the gotrue-js or the netlify-identity-widget. This means actions like:

  • inviting users,
  • getting/setting user data,
  • deleting users,
  • and iterating over your list of users, etc.

We automatically pass the URL for your specific sites’s identity API endpoint to your Netlify-hosted lambda functions, and provide a short lived JWT (JSON Web Token) so you can authenticate the requests. More info on using this access method can be found in our documentation in this article.

1 Like

how would i go about doing it?
i need assistance

1 Like

Hi there, please see my answer in the other question you posted :point_right: How to customize the UI for Netlify Identity widget - #2 by perry

the third party GitHub - netlify-labs/react-netlify-identity: a tiny (4kb) React hook for using Netlify Identity, no UI. SEEKING MAINTAINERS project provides a nice no-UI login layer over gotruejs, and GitHub - netlify-labs/react-netlify-identity-widget: a small (6kb) drop-in accessible authentication widget for your React apps. SEEKING MAINTAINERS also lets you write your own css but provides one for you if you wish.

1 Like

Looking for helpers for the svelte wrapper