{"id":29802334,"url":"https://github.com/bigfatdog/auth-flow-react-apollo-saga","last_synced_at":"2025-07-28T10:10:37.359Z","repository":{"id":46939627,"uuid":"118539208","full_name":"BigFatDog/auth-flow-react-apollo-saga","owner":"BigFatDog","description":"Full stack login/register flow with React, Apollo, Redux, Redux-saga and MongoDB.","archived":false,"fork":false,"pushed_at":"2021-09-21T01:08:22.000Z","size":10421,"stargazers_count":22,"open_issues_count":27,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T12:47:24.856Z","etag":null,"topics":["apollo","auth","express","graphql","jwt","login","mongodb","react","redux","redux-saga","register","token"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BigFatDog.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-23T01:25:25.000Z","updated_at":"2024-04-14T12:47:24.857Z","dependencies_parsed_at":"2022-09-05T17:01:54.246Z","dependency_job_id":null,"html_url":"https://github.com/BigFatDog/auth-flow-react-apollo-saga","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/BigFatDog/auth-flow-react-apollo-saga","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigFatDog%2Fauth-flow-react-apollo-saga","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigFatDog%2Fauth-flow-react-apollo-saga/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigFatDog%2Fauth-flow-react-apollo-saga/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigFatDog%2Fauth-flow-react-apollo-saga/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BigFatDog","download_url":"https://codeload.github.com/BigFatDog/auth-flow-react-apollo-saga/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigFatDog%2Fauth-flow-react-apollo-saga/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267498468,"owners_count":24097406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","auth","express","graphql","jwt","login","mongodb","react","redux","redux-saga","register","token"],"created_at":"2025-07-28T10:10:31.156Z","updated_at":"2025-07-28T10:10:37.359Z","avatar_url":"https://github.com/BigFatDog.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Auth flow with React, Apollo, Redux-Saga and Mongo\n\nAn SSR version of this project: [auth-flow-ssr](https://github.com/BigFatDog/auth-flow-ssr)\n\nupdate: Added an autocomplete feature using redis, rxjs and mongodgb.\nIf you'd like to try this feature, please install redis and then launch server.\nIn search page, click the battery button on the bottom right of page to seed data.\nFor more information, please visist [autocomplete project page](https://github.com/BigFatDog/autocomplete)\n\n## Setup\n1. install mongodb\n2. clone this project from https://github.com/BigFatDog/auth-flow-react-apollo-saga.git\n3. npm install\n4. npm run start\n5. visit localhost:3010\n\n## Features\nThis application aims to demonstrate a full stack login/register flow based on React, Redux, Apollo, Redux-saga and MongoDB.\n\n* based on access token and refresh token. Tokens are stored in http-only cookie.\n* verify token on route change (implemented via High-Order-Component)\n* jwt middleware for both web endpoint and apollo endpoint\n* authentication status is stored as immutable object in Redux store\n* failures of verifying tokens will redirect user to login page\n* handling error messages in i18n\n\nCommon failures\n* lost server connection\n* opertation timeout\n* MongoDB down\n\nLogin failures\n* User not found\n* Invalid credentials\n\nRegister failures\n* user already exists\n* email already exists\n\n## Implementation\n### Project Structure\nI started this project with [React Boilerplate](https://github.com/react-boilerplate/react-boilerplate). The following adjustments are made per my own needs:\n1. server code are compiled to build/server/bundle.js\n2. .graphql support\n3. server logic are in ES6, run with node since [1.0.2](https://github.com/BigFatDog/auth-flow-react-apollo-saga/releases/tag/1.0.2)\n4. server runs with `esm` in `dev` mode\n5. add apollo server and client\n6. axios is used for rest call\n7. fontawesome 5\n\n### Web Server authentication v.s. GraphQL authentication\nIt has been introduced in this awesome tutorial: [Apollo Tutorial](https://dev-blog.apollodata.com/a-guide-to-authentication-in-graphql-e002a4039d1).\nI chose the web server approach.\n\n## Limitations\n* Apollo WebSocket failures haven't been verified\n* No 3rd party auth support. (passport-facebook, passport-github)\n* No Server rendering support. I'd go for next.js if server rendering is needed\n* No tests\n\n## Credits\n* [React Boilerplate](https://github.com/react-boilerplate/react-boilerplate) the initial project structure\n* [Apollo Universal Starter Kit](https://github.com/sysgears/apollo-universal-starter-kit) implementation of access token and refresh token\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigfatdog%2Fauth-flow-react-apollo-saga","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigfatdog%2Fauth-flow-react-apollo-saga","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigfatdog%2Fauth-flow-react-apollo-saga/lists"}