You made it to the last part!
Unfortunately I do not have any epic Tom quotes about authentication.
|I - Redwood Philosophies||Part 1 - Setup|
|II - Full Stack React||Part 2 - Routes|
|III - Jamstack||Part 3 - Prisma|
|IV - Serverless||Part 4 - CRUD|
|Part 5 - Contact|
|Part 6 - GraphQL|
|Part 7 - Deploy|
|Part 8 - Auth|
We're going to implement a login form so no one can edit our blog willy-nilly. But before we do that let's give ourselves a custom domain. We can do this in our Settings on Netlify.
Go to Domain management and you should see a box for Custom domains.
Netlify assigns a random domain name by default but gives the option to edit it.
I'll change my site name to
Click Save and it'll reflect your new site name.
Now lets go to the Identity tab.
Enable Identity to enable identity.
Here we can invite users to give them permissions. We are going to lock down our site and only give ourselves permission to see or edit anything. Click
Invite user to invite a user.
We'll come back to that, but first we're going to learn one more
redwood generate command, this time for authentication.
yarn rw g auth netlify
I'm going to use Netlify but as of now we have the option to use:
This will create an
auth.js file in
api/src/lib and automatically modify our
index.js file in
web/src and our
graphql.js file in
If we check our
package.json file in our
web folder we'll see two new dependencies
auth.js file was generated in our
Lets look at the generated file.
We have a helper method
requireAuth which we'll use in our services. If someone is not authenticated it will throw an error.
netlifyIdentity are imported. Netlify identity is initialize with
netlifyIdentity.init(). This will be unique to whatever provider you use.
AuthProvider wraps the Router and takes in a
type which are
getCurrentUser is imported and passed to the
handler that sets up our GraphQL so we don't have to worry about it.
requireAuth and use it to restrict access to our endpoints.
We want to restrict access to the sensitive endpoints including
Lets try to make a new post.
We are told that we don't have permission to do that. But we want to make it so an unauthenticated user can't even get this far. Let's create private routes for all the
@redwoodjs/router and use it to wrap our
If we go back to the
new route we'll now get an error message.
Instead of just showing an error message, we can redirect the user back to the home page by adding
Now we'll see a redirect in the URL and we'll be taken back to the home
To implement authentication we'll start by importing
useAuth from the Redwood
We'll use object destructuring to pull out the
We'll then add a link to Log In and pass the
logIn object to the
onClick event handler.
If we return to our browser we'll now see a link to log in.
If we click the link we'll get this fancy looking message from Netlify asking for our site's url.
Enter the domain that we created at the beginning of the article.
Now we have our log in forum.
You should have received an email to accept the invitation from Netlify.
If we follow the link to accept the invite we'll be taken to our live website and there will be an invite token in the URL.
invite_token starting with the
# and copy-paste it over to your localhost.
You should now get a form to enter your password and complete your signup.
If you did everything correctly then you should see your blog posts again.
Now we want to add a link to our home page that we can use to log in and log out. We'll destructure two addition objects,
We'll add another list them that uses a ternary operator to check whether we are authenticated and to display either Log Out or Log In depending on whether we are logged in or not.
Go back to your browser and since we are logged in you should see a link for Log Out.
Now lets also add a ternary operator to the link itself so it knows to log out with we are currently logged in, and log in if we aren't currently logged in.
If we click Log Out the page will refresh and the link will change to Log In.
If we click Log In then we see our log in form again.
If we log in then the link will change back to Log Out.
We'll destructure one more object called
We'll check to make sure we're authenticated and if so we'll show the current user's email with
If we now look back in our browser you should see a message saying you are logged in.
And that's it! Right now you should either be feeling a great sense of accomplishment over building some amazing, or a horrible sinking feeling that you just wasted hours of your life building something useless. The choice is yours!
Laravel 6 : Activate Account after Email Verification using Laravel mail
Mahedi Hasan -
AUTHeNtication VS AUTHoriZation
DaNeil Coulthard -
Using Netlify Identity in a Vue SPA without localStorage
Jeremy Wynn -
JAMstack: Progressive Mailchimp sign-up form with Netlify
Stanislav(Stas) Katkov -