{"id":19097044,"url":"https://github.com/isaac-svi/rex-jwt-client","last_synced_at":"2026-05-14T01:39:31.360Z","repository":{"id":65490006,"uuid":"343809209","full_name":"Isaac-Svi/rex-jwt-client","owner":"Isaac-Svi","description":"NPM security package for MERN application.  Makes user management across an SPA manageable and secure with JWTs.","archived":false,"fork":false,"pushed_at":"2021-07-14T10:06:05.000Z","size":641,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T19:04:04.122Z","etag":null,"topics":["jwt","mern-stack","react"],"latest_commit_sha":null,"homepage":"","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/Isaac-Svi.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":"2021-03-02T14:51:06.000Z","updated_at":"2023-01-10T13:35:53.000Z","dependencies_parsed_at":"2023-01-25T17:45:18.347Z","dependency_job_id":null,"html_url":"https://github.com/Isaac-Svi/rex-jwt-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Isaac-Svi%2Frex-jwt-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Isaac-Svi%2Frex-jwt-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Isaac-Svi%2Frex-jwt-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Isaac-Svi%2Frex-jwt-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Isaac-Svi","download_url":"https://codeload.github.com/Isaac-Svi/rex-jwt-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240149848,"owners_count":19755754,"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","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":["jwt","mern-stack","react"],"created_at":"2024-11-09T03:38:35.220Z","updated_at":"2026-05-14T01:39:31.332Z","avatar_url":"https://github.com/Isaac-Svi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rex-jwt-client\n\nrex-jwt-client is the client side corresponding package for [rex-jwt-middleware](https://www.npmjs.com/package/rex-jwt-middleware).  Easily manage client side authentication on a react/express application.\n\n# Contents\n\n- [Installation](#installation)\n- [Example](#example)\n- [AuthProvider](#authprovider)\n- [Routing Components](#routing)\n  - [PrivateLink and PublicLink](#links)\n  - [PrivateRoute and PublicRoute](#routes)\n- [useProtectedFetch](#useProtectedFetch)\n- [Description](#description)\n\n# Installation \u003ca name=\"installation\"\u003e\u003c/a\u003e\n```\nnpm i rex-jwt-client\n```  \nor\n```\nyarn add rex-jwt-client\n```\n\n# Example \u003ca name=\"example\"\u003e\u003c/a\u003e\nFirst, let's take a look at a working example.  We'll break it down afterwards in the coming sections.\n```javascript\nimport React from  'react'\nimport { BrowserRouter as Router, Switch, Route, Link } from  'react-router-dom'\nimport { \n  AuthProvider, \n  PrivateRoute, \n  PublicRoute,\n  PublicLink,\n  PrivateLink\n} from  'rex-jwt-client'\nimport Home from  './pages/Home'\nimport Login from  './pages/Login'\nimport Register from  './pages/Register'\nimport SecretPage from  './pages/SecretPage'\nimport Loader from  './components/Loader'\n\nconst  App  = () =\u003e {\n  return (\n    \u003cAuthProvider  refreshRoute='/api/refresh'  loader={Loader}\u003e\n      \u003cRouter\u003e\n        \u003cnav\u003e\n          \u003cLink  to='/'\u003eHome\u003c/Link\u003e\n          \u003cPrivateLink  to='/secret'\u003eSecret\u003c/PrivateLink\u003e\n          \u003cPublicLink  to='/login'\u003eLog In\u003c/PublicLink\u003e\n          \u003cPublicLink  to='/register'\u003eRegister\u003c/PublicLink\u003e\n        \u003c/nav\u003e\n        \u003cSwitch\u003e\n          \u003cRoute  \n            exact\n            path='/' \n            component={Home}\n          /\u003e\n          \u003cPrivateRoute\n            exact  \n            path='/secret'  \n            redirect='/'  \n            component={SecretPage} \n          /\u003e\n          \u003cPublicRoute\n            exact\n            path='/login'\n            redirect='/secret'\n            component={Login}\n          /\u003e\n          \u003cPublicRoute\n            exact\n            path='/register'\n            redirect='/secret'\n            component={Register}\n          /\u003e\n        \u003c/Switch\u003e\n      \u003c/Router\u003e\n    \u003c/AuthProvider\u003e\n  )\n}\nexport  default App\n```\nLet's break it down piece by piece.\n# AuthProvider \u003ca name=\"authprovider\"\u003e\u003c/a\u003e\n \nThe AuthProvider is just a React context provider that holds all of the user's authentication details.\nIt takes a couple props:\n| prop | description |\n|--|--|\n| refreshRoute | Requried parameter, which is a route that should match the route set up to refresh the accessToken in the back end. |\n| loader | Optional parameter.  If you want one specific loading component to be accessible in every place where a request with **useProtectedFetch** is made, just add your component here.  |\n---\nTo access the loader in other child components of the AuthProvider:\n```javascript\nimport  { AuthProvider }  from  'rex-jwt-client'\nconst { loader } = useContext(AuthProvider.contextType)\n```\n\n# Routing Components \u003ca name=\"routing\"\u003e\u003c/a\u003e\nAll Route and Link components are dependent on the package `react-router-dom` and must be used in a `BrowserRouter` component as shown above.  A CLI will be made in the future to more easily incorporate this option.  For now, `react-router-dom` can be installed by doing:\n```\nnpm i react-router-dom\n```\nor\n```\nyarn add react-router-dom\n```\n### PrivateLink and PublicLink \u003ca name=\"links\"\u003e\u003c/a\u003e\nA PrivateLink is a link that only exists/gets shown when a user's access token is.  A PublicLink is a link that's only shown when a user is not logged in.\n| prop | description |\n|--|--|\n| to | Path that the link links to. Same as an href in an anchor tag. |\n\n### PrivateRoute and PublicRoute \u003ca name=\"routes\"\u003e\u003c/a\u003e\nA PrivateRoute is a route that's accessible only when a user is logged in.  A PublicRoute is a route that's accessible only shown when a user is not logged in.  Any of the same props that can be added to a Route component from react-router-dom can be added to these components with one addition.  The following are the main props:\n| prop | description |\n|--|--|\n| component | Component to be shown when URL matches **path**. |\n| path | URL that corresponds to **component**. |\n| redirect | Redirect URL. If authenticated user tries accessing PublicRoute, they will be redirected to this URL. The same with an unauthenticated user trying to access a PrivateRoute. |\n| exact | Makes sure that **component** is shown only if URL matches **path** exactly. |\n\n\n# useProtectedFetch \u003ca name=\"useProtectedFetch\"\u003e\u003c/a\u003e\nThis is a special hook that fetches and/or sends info along a protected route in the api.  If the access token has expired, but the refresh token hasn't expired, it will refresh the access token before accessing the protected route.\n\nLet's take a look at the `SecretPage` component we imported in the example above:\n```javascript\nimport React, { useContext } from  'react'\nimport { AuthProvider, useProtectedFetch } from  'rex-jwt-client'\n\nconst  SecretPage  = () =\u003e {\n  const { loader: Loader } = useContext(AuthProvider.contextType)\n  const { data, loading, error } = useProtectedFetch({\n    route: '/api/secret',\n    method: 'GET',\n    responseType: 'text',\n  })\n\n  if (loading) return  \u003cLoader  /\u003e\n\n  if (error) return  \u003cdiv\u003e{error}\u003c/div\u003e\n\n  return  \u003cdiv\u003eSecret data: {data}\u003c/div\u003e\n}\nexport  default SecretPage\n```\n**useProtectedFetch** takes the following parameters: \n| parameter | description |  Is required  |\n|--|--|--|\n| route | Route that the request is being made to. | ✔ |\n| method | Method being used for request. 'GET', 'POST', etc. | ✔ |\n| headers | Additional parameters like `'Content-Type'`, same as headers that can be put in a regular fetch call. | ✖ |\n| body | Body of request. | ✖ |\n| responseType | Specify how the data will be parsed upon being received.  Currently, `\"text\"` and `\"json\"` are the only valid options. If no option is specified, json is used. | ✖ |\n---\nAs shown above, this hook returns 3 things:\n- **data** - Parsed data received from fetch request.\n- **loading** - State that shows whether or not we're still waiting for data.\n- **error** - Error message if fetch call went wrong.\n\n# Description of the process: \u003ca name=\"description\"\u003e\u003c/a\u003e\n\nThis package uses two JWT's to carry out authentication, an access token and a refresh token.  When a user logs into the site, they receive these two tokens.  The access token can be stored either in memory or localStorage, and the refresh token gets stored in an HTTP only cookie.  \n\nThe access token is what allows a user to access protected routes.  Once the access token expires, as long as the refresh token hasn't expired, the refresh route can be used to get a new access token before accessing a protected route.\n\nI hope this package can help make react/express authentication easier, and if there's any improvements that can be made, I'm always open to looking at pull requests in the GitHub repo.\n\nAll the best. 👋","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaac-svi%2Frex-jwt-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisaac-svi%2Frex-jwt-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaac-svi%2Frex-jwt-client/lists"}