Building URL shortener using React, Apollo, and GraphQL — Part V: User Authentication
Published in
11 min readJan 7, 2018
Table of Contents
- Part I: Setup and displaying short URLs using GraphQL
- Part II: Creating short URLs
- Part III: Creating serverless function for hashing
- Part IV: Short URL stats (number of clicks)
- Part V: User authentication (login, sign-up) (this post)
Happy New Year and welcome back! In this part which is last part of the series, we are going to implement user authentication (login and sign up) as well as modify our queries, mutations and subscriptions to support this. At the moment, anyone can go to the site and create as many short links as they want. What we want want to do is to require users to sign-up first, then they can login to the site and can create their own links there without seeing anyone else’s links.
If you’re interested in looking at the final version of the project, visit the GitHub repo here.
Login and Sign-up React components
Let’s start with a two simple components that we are going to use to sign-up and login to the site.
