Cover image for a first look at redwood.js: part 8 - auth

a first look at redwood.js: part 8 - auth

ajcwebdev profile image anthonyCampolo Updated on ・7 min read

You made it to the last part!

Alt Text

Unfortunately I do not have any epic Tom quotes about authentication.

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 ajcwebdev-redwood.


Click Save and it'll reflect your new site name.


8.1 Netlify Identity

Now lets go to the Identity tab.


Click 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.


8.2 redwood generate auth

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 api/src/functions.


If we check our package.json file in our web folder we'll see two new dependencies @redwoodjs/auth and netlify-identity-widget.


8.3 auth.js

The auth.js file was generated in our api/src folder.


Lets look at the generated file.


8.4 requireAuth

We have a helper method requireAuth which we'll use in our services. If someone is not authenticated it will throw an error.


8.5 AuthProvider

AuthProvider and 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 client and type which are netlifyIdentity and netlify respectively.


getCurrentUser is imported and passed to the handler that sets up our GraphQL so we don't have to worry about it.


We'll import requireAuth and use it to restrict access to our endpoints.


We want to restrict access to the sensitive endpoints including createPost, updatePost, and deletePost.


Lets try to make a new post.


8.6 Private

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 /posts routes.


We'll import Private from @redwoodjs/router and use it to wrap our /posts routes.


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 unauthenticated="home".


Now we'll see a redirect in the URL and we'll be taken back to the home


8.7 useAuth

To implement authentication we'll start by importing useAuth from the Redwood auth package.


We'll use object destructuring to pull out the logIn object.


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.


Grab the 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, isAuthenticated and logOut.


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 currentUser.


We'll check to make sure we're authenticated and if so we'll show the current user's email with currentUser.email.


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!

Posted on by:


markdown guide

Really enjoyed this series and excited to give redwood a spin. Thanks!

FYI Prisma 2.0 is now ready for production!


Glad you liked the series and please let me know if you do give Redwood a try and have any questions.

You are correct that Prisma is now saying that 2.0 is ready for production as a blanket statement. But if you check the docs they still have Prisma Migrate marked as experimental and not recommended for production.

This is a key feature in Redwood and we won't feel comfortable recommending Redwood and Prisma for production use until migrations are stable.