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

01-netlify-settings

Go to Domain management and you should see a box for Custom domains.

02-custom-domains

Netlify assigns a random domain name by default but gives the option to edit it.

03-change-site-name

I'll change my site name to ajcwebdev-redwood.

04-ajcwebdev-redwood-netlify-app

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

05-default-subdomain

8.1 Netlify Identity

Now lets go to the Identity tab.

06-netlify-identity

Click Enable Identity to enable identity.

07-netlify-identity-level-0

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.

08-invite-users

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.

10-redwood-genearte-auth-netlify-output

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

11-dependencies-redwood-auth-netlify-identity-widget

8.3 auth.js

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

12-lib-auth.js

Lets look at the generated file.

13-auth.js

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.

14-index.js-netlify-identity

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.

15-graphql.js-getCurrentUser

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

16-posts.js-import-requireAuth

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

17-requireAuth()

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

18-test-new-post

Lets try to make a new post.

19-don't-have-permission-to-make-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.

20-import-Private-from-router

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

21-Private-routes-posts

If we go back to the new route we'll now get an error message.

22-something-went-wrong

Instead of just showing an error message, we can redirect the user back to the home page by adding unauthenticated="home".

23-Private-unauthenticated-home-redirect

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

25-redirect-to-home-page

8.7 useAuth

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

26-BlogLayout.js-import-useAuth-from-auth

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

27-logIn-destructuring-useAuth()

We'll then add a link to Log In and pass the logIn object to the onClick event handler.

28-a-href-onClick-logIn

If we return to our browser we'll now see a link to log in.

29-home-page-with-log-in-link

If we click the link we'll get this fancy looking message from Netlify asking for our site's url.

30-url-of-your-netlify-site

Enter the domain that we created at the beginning of the article.

31-set-site's-url

Now we have our log in forum.

32-log-in-form

You should have received an email to accept the invitation from Netlify.

33-you've-been-invited-to-join

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.

34-deployed-site-invite-token

Grab the invite_token starting with the # and copy-paste it over to your localhost.

35-localhost-invite-token

You should now get a form to enter your password and complete your signup.

36-complete-your-signup

If you did everything correctly then you should see your blog posts again.

38-protected-posts

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.

39-isAuthenticated-logOut-destructuring-useAuth()

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.

40-onClick-logIn

Go back to your browser and since we are logged in you should see a link for Log Out.

41-home-page-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.

42-onClick-isAuthenticated

If we click Log Out the page will refresh and the link will change to Log In.

43-home-page-log-in-link

If we click Log In then we see our log in form again.

44-log-in-form

If we log in then the link will change back to Log Out.

45-home-page-log-out-link

We'll destructure one more object called currentUser.

46-currentUser-destructuring-useAuth()

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

47-isAuthenticated-logged-in-as-currentUser.email

If we now look back in our browser you should see a message saying you are logged in.

48-logged-in-as

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:

Discussion

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.