From d7d1b06c88d9906221482cc2d89bfb00f46ebcba Mon Sep 17 00:00:00 2001 From: EmmaKhayrullina Date: Wed, 26 Apr 2023 11:43:22 +0300 Subject: [PATCH] add readme for auth --- README.md | 24 ++++++++++++++++-------- lib/AuthProcess.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 8 deletions(-) create mode 100644 lib/AuthProcess.md diff --git a/README.md b/README.md index e685360..1eefb92 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,21 @@ [![Build Status](https://flatstack.semaphoreci.com/badges/react-ts-next-base/branches/master.svg?style=shields&key=96052622-7942-4693-8763-afb25b9ecc2b)](https://flatstack.semaphoreci.com/projects/react-ts-next-base) -### Install dependencies: +### Install dependencies Run `yarn` +> **Note**: you must have the required version of Node.js installed, as specified in the [package.json](package.json) file + # -### Setup environment for development: +### Setup environment for development + +Create `.env` file at the root of project with the necessary variables that are specified in the file [.env.example](.env.example) -Create `.env` file using `.env.example` example +Request the values for the variables from the admin + +> **Note**: If you create new variables, don't forget to add them to the [next.config.mjs](next.config.mjs) and [.env.example](.env.example) files ### @@ -22,7 +28,8 @@ Ask for token and key from admin - Run `yarn server` for a dev server. - Open `localhost:8080`. -- The app will automatically reload if you change any of the source files. + +> The app will automatically reload if you change any of the source files. ### Yarn tasks @@ -41,12 +48,13 @@ Ask for token and key from admin # ### Useful links +#### For project: +- [Best practices for working with styled components](./public/styles/bestPractiseForStyledComponents.md) +- [How auth process works](./lib/AuthProcess.md) -### - -[Apollo Client Developer Tools](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm) +#### To work more efficiently: -### +- [Apollo Client Developer Tools](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm) # diff --git a/lib/AuthProcess.md b/lib/AuthProcess.md new file mode 100644 index 0000000..b101f1a --- /dev/null +++ b/lib/AuthProcess.md @@ -0,0 +1,43 @@ +## Short description +> **TODO** +# + +## Available HOCs + +### Main: +### [**withAccessTokenManager**](./auth/withAccessTokenManager.tsx): +Creates object containing access and refresh tokens. +> **TODO:** why we need this object? + +Adds accessTokenManager (access and refresh tokens object) to every page, that will be wrapped with this hoc. +Used in `withApolloClient` hoc + +### [**withApolloClient**](./withApolloClient.tsx): +Uses internally `withAccessTokenManager` hoc. +Adds apollo client and accessTokenManager (access and refresh tokens object) to application. +> Use once as a wrapper for your application + +### [**withAuthSyncEvents**](./auth/withAuthSyncEvents.tsx): +Listens storage event, if one of global events (`SIGN_OUT_EVENT`/`SIGN_IN_EVENT`) occurs, it reloads the page + +### [**withTokensUpdate**](./auth/withTokensUpdate.tsx): +Gets new pair of tokens (access and refresh) and sets the refresh token in the cookie + +### [**withAuth**](./auth/withAuth.tsx): +Just combines two auth HOC's - `withTokensUpdate` +and `withAuthSyncEvents` + +# + +### Additional: +### [**withAuthSecurity**](./auth/withAuthSecurity.tsx): +Adds to page the ability to redirect from private content, if the user is not logged in + +> **Briefly**: For not logged in user and private content + +### [**withNotAuthSecurity**](./auth/withNotAuthSecurity.tsx): +> **TODO** + +Adds to page the ability to redirect from specific page, if the user is logged in, but the content of that page should not be accessible + +> **Briefly**: For logged in user and private content