If you're looking for a non-ssr version, please check auth-flow-react-apollo-saga
- Server Side Rendering
- Separate bundling for each page
- Use service worker to preload scripts asynchronously
- Pre data fetching. Page are immediately ready on the first visit
Nextjs, Apollo, React, Redux, Redux-saga, Express, MongoDB, Re-select
This is an alternative architecture to auth-flow-react-apollo-saga. This project has similar technology stack and code base with auth-flow-react-apollo-saga. The major difference is this project is based on Next.js framework.
- install mongodb
- clone this project from https://github.com/BigFatDog/auth-flow-ssr.git
- npm install
- npm run start
- visit localhost:3030
This application aims to demonstrate a full stack login/register flow.
- 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
I started this project with React Boilerplate. The following adjustments are made per my own needs:
- server code are compiled to build/server
- .graphql support
- server logic are in ES6, built and run with babel-node
- add apollo server and client
- axios is used for rest call
- fontawesome 5
It has been introduced in this awesome tutorial: Apollo Tutorial. I chose the web server approach.
- Apollo WebSocket failures haven't been verified
- No 3rd party auth support. (passport-facebook, passport-github)
- No tests
- React Boilerplate the initial project structure
- Apollo Universal Starter Kit implementation of access token and refresh token
MIT