Jamstack Explorers

Angular in the Jamstack with Tara Z. Manicsic

Adding Signup and Login

Can you have authentication in the Jamstack with Angular? Why yes you can, here's how!

In this stage, we'll be using Netlify Identity to give our users easy signup and login abilities with Github and Google providers.


Hey explorers. It's time to add some auths to our awesome Jamstack Angular site with Netlify Identity. Netlify Identity uses the GoTrue API and Netlify functions to hook up different ways for users to sign up and log in to your application. It's actually based on the Netlify Identity widget, which is an open-source project that I highly recommend you check out and contribute to if you have the bandwidth.

First things first, we're going to generate a new component called navigation and it'll use the app dot module module. Here is where we're going to put the log in button. First we'll go to this new navigation component's TypeScript file, just because I want to show you the selector we're going to use inside of our main component is this app navigation that we'll use later, as you will see. The next important step is to go into the navigation's HTML and actually add this navigation layout.

First we'll do the nav ID and set it to navigation and then the class will also be navigation. We're going to add the label that this is the navigation. Inside here we're going to have the UL and inside there goes the dip. This is going to have class login and it's also going to pass in data dash Netlify dash identity dash button and that's actually all we need to do to add this new log in component. Inside of the main app dot component HTML, we'll put that app navigation component that we just made if we can spell it right. Say that inside of index dot HTML, we're actually going to add a script tag here to pass in that widget.

We'll go ahead and set the type to text JavaScript and then we'll put this source as the link to the Netlify Identity widget, which is identity dot netlify.com forward slash V1 forward slash Netlify dash identity dash widget dot JS. We'll save all of that and head back to the terminal. We're going to say Netlify open because there's a few things we have to do on the UI now. Pretty straight forward, you'll see in your dashboard there's an identity tab. Inside here, we click enable identity. Now it knows that it's going to be looking for that identity div, but we can also do some settings here.

Under here it says we can add external providers. Today we'll just ad GitHub, do the usual default and we'll add Google, do the usual default. You can add your own options there and make it however you like. Now, we can actually go ahead in our Git workflow, add this new component that we just did for navigation, push that up to our repo. Again, because of the Git workflow we have integrated with Netlify, this commit, this push to our repo will actually initialize a new deploy that we can look at on our dashboard by running NTL, short for Netlify, open.

Heading over to our project dashboard at Netlify, we'll see that that triggered a new build and we can see all the logs come through for when that's finally built. Go back to that deploy dashboard and go to our site. There we have a login link and that actually opens up a whole interface for us that we can sign up and we can even sign up with Google. Connected, we're logged in and now I can log out. Now that I've signed up, I can log in using Google or GitHub and hey, I'm logged in again. With just those few changes, we were able to add the ability to have auth in our site. Congratulations, you did it.


your progress