--- title: "Authenticating Users with Angular and Netlify Identity" description: "In this post, we" source: "https://www.netlify.com/blog/2020/07/07/authenticating-users-with-angular-and-netlify-identity/" last_updated: "2026-07-11T01:37:18.000Z" --- Setting up login and user permissions doesn’t have to be hard. Breaking that security, that part should be hard. I’ve had the opposite of both, hard-to-code authentication and fragile security. So, I was stoked to work with our [Netlify Identity](https://docs.netlify.com/visitor-access/identity/?utm_source=blog&utm_medium=angular-identity-tzm&utm_campaign=devex) features. Let me give you a little preview. In this post we’ll: - add Netlify Identity login to an Angular Project - add external OAuth providers - assign user roles [🐙 Here’s the repo](https://github.com/tzmanics/angular-netlify-identity-demo) for the project that we’ll be using today and the live site lives at [angular-netlify-identity-demo.netlify.app](https://angular-netlify-identity-demo.netlify.app). Time to Netlify Identify (to be clear, it’s Netlify Identity, but I couldn’t help it)! ## The Starter Project For this demo we’ll be using a project created with: - the Angular CLI [🐙 <– commit where we incorporate it](https://github.com/tzmanics/angular-netlify-identity-demo/commit/71d6c9580b7359b9c9a7c2f1a930fecfcef02a25) - [Scully](https://scully.io/), Angular Static Site Generator [🐙](https://github.com/tzmanics/angular-netlify-identity-demo/commit/d54a3990a45ac4d723c0dd649947fe9b6e143b07) - [Netlify Edge](https://www.netlify.com/products/edge/?utm_source=blog&utm_medium=angular-identity-tzm&utm_campaign=devex) for deployment [🐙](https://github.com/tzmanics/angular-netlify-identity-demo/commit/5c3abb99a1007c15df9c17241f594a5b9b82316f) It is a pre-rendered application, thanks to Scully, hosted on a CDN (Content Delivery Network), thanks to Netlify. We officially have a simple, Jamstack site. We can now clone it locally and install the dependencies. ``` git clone https://github.com/tzmanics/angular-netlify-identity-democd angular-netlify-identity-demonpm install ``` Once that is set up we’ll want to hook it up to a Netlify project. We can install the [Netlify CLI](https://docs.netlify.com/cli/get-started/?utm_source=blog&utm_medium=angular-identity-tzm&utm_campaign=devex) then run the `netlify init` command to hook it up to a new project. > 🙋🏻‍If you’re new to Netlify, this command will get you signed up on Netlify as well! ``` npm install netlify-cli -gnetlify init ``` We haz a site! ![a screenshot of the project we have to far](/v3/img/blog/initial-project.jpg) ## Adding Login with Netlify Identity To add login we only need TWO lines of code! I Shih Tzu not. ![a shih tzu giving side eye](/v3/img/blog/shihtzu.jpeg) First, in the `index.html` file we will add a script that brings in the [Netlify Identity](https://docs.netlify.com/visitor-access/identity/?utm_source=blog&utm_medium=angular-identity-tzm&utm_campaign=devex) widget. src/index.html ``` Angular Netlify Identity Demo + ``` Then to add ‘Log in’ button we’ll edit the template page it will live in. For this project that is `app.component.html`. src/app/app.component.html ```

Angular Netlify Identity Demo

``` ### Enabling Netlify Identity The final step is enabling Netlify Identity on our project’s Netlify dashboard. ![the Netlify Identity dashboard](/v3/img/blog/enable-identity.jpg) I could write more, but we just need to click the ‘Enable Identity’ button. So, that’s all I’ll say. Nothing more, nothing less. Anything else I write would just be more to read…oh, sorry. The video below shows how our empty button gets populated with ‘Login’ once Netlify Identity is enabled. ## Adding External Providers Now that we have Netlify Identity enabled, users have the ability to sign up and login with their emails. Creating new logins for every site you use can be cumbersome, so many developers are turning to external authentication providers for a faster and easier authentication process. Netlify Identity gives us the option to add GitHub, GitLab, Google, and Bitbucket external OAuth integrations. > 📖 You can read more about external provider authentication in [our docs](https://docs.netlify.com/visitor-access/identity/registration-login/?utm_source=blog&utm_medium=angular-identity-tzm&utm_campaign=devex#external-provider-authentication). Going back to the Identity section of our Netlify site’s dashboard, we’ll need to click on the ‘Settings and usage’ button. Scrolling down to the ‘Registration’ section there is a box labeled ‘External providers’. Click the ‘Add provider’ dropdown to select an external provider. ![dropdown of external providers](/v3/img/blog/external-providers.jpg) When selected a pop-up window will open up and allow us to either use the default configurations or use our own credentials. ![the form for using your own external provider credentials](/v3/img/blog/own-credentials.jpg) Using the default means that our visitors will see ‘Netlify Identity’ as the app requesting authorization. If we use our credentials they will see our GitHub, Google, etc. app or site instead. Once we choose either option and provide our info, if not using the defaults, we can refresh the page and see our new authorization options. ![list of authorization options](/v3/img/blog/external-list.jpg) Here’s a video walking through the whole process. ## Assigning Roles We now have a way for users to sign in. When they sign in we have their information and can easily assign them roles. We do this through another form on our site’s Identity dashboard. When users login or sign up they will show up on the main page of the dashboard. We can click the user to go the the ‘User Information’ page to see their information and assign or remove roles. When we click the ‘Edit settings’ button all the user’s information becomes editable. ‘Roles’ allows us to choose from a dropdown of roles (if any exist) or type in new roles. If we need to remove roles we can click the ‘x’ next to that role to remove it. ![the User metadata form](/v3/img/blog/roles.jpg) Words are hard, so here’s a video instead! ## What Just Happened? Netlify is doing all the work behind the scenes with serverless functions. We just had to write two lines of code and press some buttons. That’s good because we have lots of other work today. I mean, _have_ you watched Hamilton on Disney+ yet? Seriously though, spend less time and stress on authentication and use it to give your users the features they’re requesting. In this post we: - added Netlify Identity to our Angular application - included external authorization providers to make sign up and login faster - edited and added roles to our app’s users This is skimming the surface of what Netlify Identity can do. I highly recommend checking out the [Netlify Identity documentation](https://docs.netlify.com/visitor-access/identity/registration-login/?utm_source=blog&utm_medium=angular-identity-tzm&utm_campaign=devex#external-provider-authentication) to learn more. In the meantime, I hope you have a great time _saving_ time by skipping complicated authorization for your site. Happy coding 👩🏻‍💻! ## Resources for the Road - [Netlify Identity](https://www.netlify.com/products/?utm_source=blog&utm_medium=angular-identity-tzm&utm_campaign=devex#identity) - [Building an Angular Jamstack App with Scully](https://www.netlify.com/blog/2019/12/17/building-an-angular-jamstack-app-with-scully/?utm_source=blog&utm_medium=angular-identity-tzm&utm_campaign=devex) - [GoTrue JS – bringing authentication to static sites with just 3kb of JS](https://www.netlify.com/blog/2018/12/07/gotrue-js-bringing-authentication-to-static-sites-with-just-3kb-of-js/?utm_source=blog&utm_medium=angular-identity-tzm&utm_campaign=devex) - [Netlify Identity Docs](https://docs.netlify.com/visitor-access/identity/registration-login/?utm_source=blog&utm_medium=angular-identity-tzm&utm_campaign=devex#external-provider-authentication) ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Authenticating Users with Angular and Netlify Identity&url=https://www.netlify.com/blog/2020/07/07/authenticating-users-with-angular-and-netlify-identity//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F07%2F07%2Fauthenticating-users-with-angular-and-netlify-identity%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/07/07/authenticating-users-with-angular-and-netlify-identity//) - [Bluesky](https://bsky.app/intent/compose?text=Authenticating Users with Angular and Netlify Identity+https://www.netlify.com/blog/2020/07/07/authenticating-users-with-angular-and-netlify-identity//) * * * ### Tags - [Identity](/blog/tags/identity/) - [Angular](/blog/tags/angular/) ## Keep reading ![](/_astro/3f45eb6eda4ea8814be310e3df4a7883a5bd9ba0-1200x675_ZcBDUS.webp) Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/8fe9e8a23f944c9912003233d99a2df7fee637cf-1600x900_Z1gMhmf.webp) Guides & Tutorials May 15, 2026 [ ### Tracking AI search traffic: how to use Netlify Log Drains to maximize AEO ](/blog/tracking-ai-search-traffic) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)