Auth flow with React, Apollo, Redux-Saga and Mongo
An SSR version of this project: auth-flow-ssr
update: Added an autocomplete feature using redis, rxjs and mongodgb. If you'd like to try this feature, please install redis and then launch server. In search page, click the battery button on the bottom right of page to seed data. For more information, please visist autocomplete project page
Setup
- install mongodb
- clone this project from https://github.com/BigFatDog/auth-flow-react-apollo-saga.git
- npm install
- npm run start
- visit localhost:3010
Features
This application aims to demonstrate a full stack login/register flow based on React, Redux, Apollo, Redux-saga and MongoDB.
- based on access token and refresh token. Tokens are stored in http-only cookie.
- verify token on route change (implemented via High-Order-Component)
- jwt middleware for both web endpoint and apollo endpoint
- authentication status is stored as immutable object in Redux store
- failures of verifying tokens will redirect user to login page
- handling error messages in i18n
Common failures
- lost server connection
- opertation timeout
- MongoDB down
Login failures
- User not found
- Invalid credentials
Register failures
- user already exists
- email already exists
Implementation
Project Structure
I started this project with React Boilerplate. The following adjustments are made per my own needs:
- server code are compiled to build/server/bundle.js
- .graphql support
- server logic are in ES6, run with node since 1.0.2
- server runs with
esmindevmode - add apollo server and client
- axios is used for rest call
- fontawesome 5
Web Server authentication v.s. GraphQL authentication
It has been introduced in this awesome tutorial: Apollo Tutorial. I chose the web server approach.
Limitations
- Apollo WebSocket failures haven't been verified
- No 3rd party auth support. (passport-facebook, passport-github)
- No Server rendering support. I'd go for next.js if server rendering is needed
- No tests
Credits
- React Boilerplate the initial project structure
- Apollo Universal Starter Kit implementation of access token and refresh token
License
MIT