2 | 
3 |
6 | 🔑 Authentication Library for React Js for Token Based Auth with Json Web Token(JWT) 🔑 7 |
8 | 9 |
10 |
11 |
12 | 
13 |
14 |
15 |
16 | 
17 |
18 |
19 | 
20 |
21 |
22 | 
23 |
24 |
25 | 
— 🔑 —
61 |React Auth Kit is Apache 2.0 License code
62 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | 4 | ## Reporting a Vulnerability 5 | 6 | Use this section to tell people how to report a vulnerability. 7 | 8 | Tell them where to go, how often they can expect to get an update on a 9 | reported vulnerability, what to expect if the vulnerability is accepted or 10 | declined, etc. 11 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | rules: { 4 | 'body-max-line-length': [1, 'always', 150] 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | authkit.arkadip.me 2 | -------------------------------------------------------------------------------- /docs/authdata.md: -------------------------------------------------------------------------------- 1 | # Auth User Data 2 | 3 | Get the Authorized user's state from any Component simply by using `HOC` or `Hooks` 4 | 5 | - To get the Authorized user's state from _Higher Order Components_, use `withAuthUser` 6 | - To get the Authorized user's state using _React Hooks_, use `useAuthUser` 7 | 8 | ## Using Hooks 9 | 10 | ```js 11 | import {useAuthUser} from 'react-auth-kit' 12 | ``` 13 | 14 | ### Demo 15 | ```jsx 16 | import React from 'react' 17 | import {useAuthUser} from 'react-auth-kit' 18 | 19 | const SomeComponent = () => { 20 | const auth = useAuthUser() 21 | 22 | return( 23 |— 🔑 —
57 |React Auth Kit is Apache 2.0 License code
58 | -------------------------------------------------------------------------------- /docs/authheader.md: -------------------------------------------------------------------------------- 1 | # Auth Header 2 | 3 | Get the Auth Header for future request from any Component simply by using `HOC` or `Hooks` 4 | 5 | - To get the Auth Header from _Higher Order Components_, use `withAuthHeader` 6 | - To get the Auth Header using _React Hooks_, use `useAuthHeader` 7 | 8 | ## Using Hooks 9 | 10 | ```js 11 | import {useAuthHeader} from 'react-auth-kit' 12 | ``` 13 | 14 | ### Demo 15 | ```jsx 16 | import React from 'react' 17 | import {useAuthHeader} from 'react-auth-kit' 18 | 19 | const SomeComponent = () => { 20 | const authHeader = useAuthHeader() 21 | 22 | return( 23 |— 🔑 —
59 |React Auth Kit is Apache 2.0 License code
60 | -------------------------------------------------------------------------------- /docs/checkauth.md: -------------------------------------------------------------------------------- 1 | # Check Authentication 2 | 3 | > Check if any user is authenticated or not 4 | 5 | ## Introduction 6 | 7 | There are many times, when you have to understand if any user is authenticated 8 | (especially in `login` pages, where you have to redirect your user to its dashboard or allow to login) 9 | 10 | For this reason, `React Auth Kit` comes with `isAuth` functions 11 | 12 | --- 13 | 14 | `IsAuth` functionality available in both `hook` and `Higher Order Component` 15 | 16 | - For Functional Components, you can use `useIsAuthenticated` function inside any components 17 | - For class based components, you can wrap the component inside `withIsAuthenticated` function 18 | 19 | 20 | 21 | --- 22 | 23 | ## Usage 24 | ### Functional Component 25 | 26 | Check the `authentication status` in React Functional Components(FC) by adding the `useIsAuthenticated` hook inside it. 27 | 28 | #### Import 29 | 30 | ```jsx 31 | import {useIsAuthenticated} from 'react-auth-kit'; 32 | ``` 33 | 34 | #### Demo 35 | 36 | ```jsx 37 | import {useIsAuthenticated} from 'react-auth-kit'; 38 | 39 | const AnyComponent = () => { 40 | const isAuthenticated = useIsAuthenticated() 41 | 42 | if(isAuthenticated()){ 43 | // Redirect to Dashboard 44 | } 45 | else { 46 | // Redirect to Login 47 | } 48 | } 49 | ``` 50 | 51 | #### API 52 | 53 | `useIsAuthenticated()` 54 | 55 | _**Returns**_ `() => boolean` 56 | 57 | --- 58 | 59 | ### Class Based Component 60 | 61 | #### Import 62 | 63 | ```javascript 64 | import {withIsAuthenticated} from 'react-auth-kit'; 65 | ``` 66 | 67 | #### Demo 68 | ```javascript 69 | import React from "react"; 70 | import {withIsAuthenticated} from 'react-auth-kit'; 71 | 72 | class SomeComponent extends React.Component { 73 | 74 | render(){ 75 | if(this.props.isAuthenticated()){ 76 | // Redirect to Dashboard 77 | } 78 | else { 79 | // Redirect to Login 80 | } 81 | } 82 | } 83 | 84 | export default withIsAuthenticated(SomeComponent) 85 | ``` 86 | 87 | #### API 88 | `#!ts withIsAuthenticated(Component: React.ComponentType
): React.FC
` 89 | 90 | _**Parameters**_ 91 | 92 | - Component: `#!ts React.ComponentType
` 93 | 94 | _**Returns**_ `#!ts React.FC
` (Functional Component with `isAuthenticated()` prop) 95 | 96 | --- 97 | 98 |
— 🔑 —
99 |React Auth Kit is Apache 2.0 License code
100 | -------------------------------------------------------------------------------- /docs/contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Notice something that needs fixing? Or something that could be improved? Awesome! Here are some guidelines below that'll help you to do just that. 4 | 5 | In general, there are two main types of contribution, 6 | 7 | - **General improvements:** 8 | - Typo corrections. 9 | - Fixing broken refs and links. 10 | - Correcting inaccurate or out of date info. 11 | - Offering better explanations through clear writings and examples. 12 | 13 | - **New Pages or features** 14 | - Adding a page of documentation that we haven't covered yet. 15 | - Documenting a new feature that had been added to this project since its last release. 16 | 17 | 18 | ## Before contributing 19 | 20 | 1. Read the [CONTRIBUTING.md](https://github.com/react-auth-kit/react-auth-kit/blob/master/CONTRIBUTING.md) first if you haven't yet. 21 | 22 | 2. Familiarize yourself with [Mkdocs](https://www.mkdocs.org/) and [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) with which we created the documentation. 23 | 24 | 3. Read through some of our existing documents and get a feel about the overall structure and style. 25 | 26 | 4. Read our ['Best practices'](#best-practices) section and please ensure your PR meets those. 27 | 28 | 29 | ## Steps for local setup 30 | 31 | 1. We use [Github Flow](https://guides.github.com/introduction/flow/index.html), all code changes happen through [Pull Requests](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/about-pull-requests). Follow the steps specified at [CONTRIBUTING.md](https://github.com/react-auth-kit/react-auth-kit/blob/master/CONTRIBUTING.md) to set up a local repo of the project. 32 | 33 | 2. Install Material for MkDocs. 34 | 35 | === "Pip" 36 | 37 | ``` sh 38 | pip install mkdocs-material 39 | ``` 40 | 41 | This will automatically install compatible versions of all dependencies: [MkDocs](https://www.mkdocs.org/), [Markdown](https://python-markdown.github.io/), [Pygments](https://pygments.org/) and [Python Markdown Extensions](https://facelessuser.github.io/pymdown-extensions/). 42 | 43 | === "Docker" 44 | 45 | The official [Docker image](https://hub.docker.com/r/squidfunk/mkdocs-material/) is a great way to get up and running in a few minutes, as it comes with all dependencies pre-installed. Pull the image for the `latest` version with: 46 | 47 | ``` sh 48 | docker pull squidfunk/mkdocs-materiall 49 | ``` 50 | 51 | The mkdocs executable is provided as an entry point and serve is the default command. 52 | 53 | === "Git" 54 | 55 | Material for MkDocs can be directly used from [GitHub](https://www.github.com/) by cloning the repository into a subfolder of your project root which might be useful if you want to use the very latest version: 56 | 57 | ``` sh 58 | git clone https://github.com/squidfunk/mkdocs-material.git 59 | ``` 60 | 61 | The theme will reside in the folder mkdocs-material/material. When cloning from git, you must install all required dependencies yourself: 62 | 63 | ``` sh 64 | pip install -r mkdocs-material/requirements.txt 65 | ``` 66 | 67 | 3. All the contents are in the `docs` folder and the mkdocs config in `mkdocs.yml` relative to the project root directory. 68 | 69 | 4. MkDocs includes a live preview server, so you can preview your changes as you modify the documentation. The server will automatically rebuild the site upon saving. Start it with: 70 | 71 | ``` sh 72 | mkdocs serve 73 | ``` 74 | 75 | 5. You are now all set up and ready to contribute! 76 | 77 | 78 | ## Best practices 79 | 80 | 1. All pages must include a proper title and an introduction. 81 | 82 | 2. If the document contains a technical term, it must be highlighted using \*term\* markdown syntax. 83 | 84 | 3. If the document contains an acronym or initialism, it should be first introduced highlighted in its expanded form followed by the commonly-accepted abbreviation in brackets (like Free and open-source software (FOSS)). 85 | 86 | 4. Use paragraphs to introduce a single concept and move on to a new paragraph before introducing another or expanding upon the first concept. Keep the size of those paragraphs to no more than four to five lines. 87 | 88 | 5. If you find you're putting commas in a sentence consider splitting it into two or more sentences for improved clarity. 89 | 90 | 6. Split the document up into as many sub-sections as makes sense. This is especially helpful for the readers who want to skip ahead for reference, as we can also use subheads as navigational anchors. 91 | 92 | 93 | 94 | 95 |— 🔑 —
96 |React Auth Kit is Apache 2.0 License code
97 | -------------------------------------------------------------------------------- /docs/docs_overrides/main.html: -------------------------------------------------------------------------------- 1 | 16 | {% extends "base.html" %} 17 | 18 | {% block outdated %} 19 | You're not viewing the latest version. 20 | 21 | 22 | Click here to go to latest. 23 | 24 | {% endblock %} 25 | 26 | {% block extrahead %} 27 | {% set title = config.site_name %} 28 | {% if page and page.meta and page.meta.title %} 29 | {% set title = title ~ " - " ~ page.meta.title %} 30 | {% elif page and page.title and not page.is_homepage %} 31 | {% set title = title ~ " - " ~ page.title | striptags %} 32 | {% endif %} 33 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | {% endblock %} 49 | -------------------------------------------------------------------------------- /docs/img/banner.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3solution/react-auth-kit-master/c04e7ab2f91ad7da165402d2163b4e7d0c66f265/docs/img/favicon.png -------------------------------------------------------------------------------- /docs/img/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3solution/react-auth-kit-master/c04e7ab2f91ad7da165402d2163b4e7d0c66f265/docs/img/image.png -------------------------------------------------------------------------------- /docs/img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 |
2 |
3 |
6 | 🔑 Authentication Library for React Js for Token Based Auth with Json Web Token(JWT) 🔑 7 |
8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
24 |
25 |
— 🔑 —
44 |React Auth Kit is Apache 2.0 License code
45 | -------------------------------------------------------------------------------- /docs/installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | React-Auth-Kit is available as a [npm package](https://www.npmjs.com/package/react-auth-kit) 4 | 5 | 6 | 7 | ## npm :fontawesome-brands-npm: 8 | To install and save in your `package.json` dependencies, run: 9 | ```bash 10 | //with npm 11 | npm install --save react-auth-kit 12 | 13 | //with yarn 14 | yarn add react-auth-kit 15 | ``` 16 | Please note that [react](https://www.npmjs.com/package/react) >= 16, 17 | [js-cookie](https://www.npmjs.com/package/js-cookie) = 2.2.1 and 18 | [react-router-dom](https://www.npmjs.com/package/react-router-dom) = 5.2.0 are peer dependencies. 19 | 20 | ##CDN 21 | 22 | You can start using React-Auth-Kit with minimal infrastructure, which is great for prototyping. 23 | 24 | Two Universal Module Definition (**UMD**) files are provided: 25 | 26 | - **unpkg**: [https://unpkg.com/react-auth-kit/dist/index.umd.js](https://unpkg.com/react-auth-kit/dist/index.umd.js) 27 | - **jsdelivr**: [https://cdn.jsdelivr.net/npm/react-auth-kit/dist/index.umd.js](https://cdn.jsdelivr.net/npm/react-auth-kit/dist/index.umd.js) 28 | 29 | [](https://www.jsdelivr.com/package/npm/react-auth-kit) 30 | 31 | You can follow [this CDN example](https://github.com/react-auth-kit/react-auth-kit/tree/master/examples/cdn) 32 | to quickly get started. 33 | 34 | !!! warning "" 35 | 36 | Using this approach in `production` is `discouraged` though - the client has to download the entire library, 37 | regardless of which components are actually used, affecting performance and bandwidth utilization. 38 | 39 | !!! danger "" 40 | 41 | The UMD links are using the `latest` tag to point to the latest version of the library. This pointer is `unstable`, 42 | it shifts as we release new versions. You should consider pointing to a specific version, 43 | such as [v1.4.6](https://unpkg.com/react-auth-kit@1.4.6/dist/index.umd.js). 44 | 45 |— 🔑 —
46 |React Auth Kit is 47 | Apache 2.0 License code
48 | -------------------------------------------------------------------------------- /docs/integration.md: -------------------------------------------------------------------------------- 1 | # Integration 2 | React Auth Kit uses a Context Provider to maintain it's internal state in the application. 3 | So to use auth kit, you must have to add the `AuthProvider` on the very top level of your application. 4 | Without the provider the application will fail to work and will throw errors. 5 | 6 | 9 | 10 | --- 11 | ## AuthProvider 12 | 13 | AuthProvider is the top level [context](https://reactjs.org/docs/context.html) provider for React Auth Kit. 14 | By passing various props in the AuthProvider, you can configure the behaviour of React Auth Kit. 15 | 16 | ### Import 17 | ```javascript 18 | import { AuthProvider } from 'react-auth-kit' 19 | ``` 20 | 21 | ### Example 22 | 23 | Integrate `AuthProvider` before Routes. The best place is `app.js`. 24 | 25 | 26 | ```javascript 27 | //app.js 28 | 29 | import React from 'react'; 30 | import { AuthProvider } from 'react-auth-kit' 31 | import RouteComponent from './routes'; 32 | 33 | const App = () => ( 34 |— 🔑 —
68 |React Auth Kit is Apache 2.0 License code
69 | -------------------------------------------------------------------------------- /docs/privateroute.md: -------------------------------------------------------------------------------- 1 | # Private Route 2 | 3 | > Implement Private Route on your React App 4 | 5 | React Auth Kit has a `PrivateRoute` functionality Based on [React Router](https://reactrouter.com/) 6 | 7 | ## Import 8 | 9 | ```js 10 | import {PrivateRoute} from 'react-auth-kit' 11 | ``` 12 | 13 | ## Implementation 14 | 15 | Add `PrivateRoute` in your Routes Files inside `BrowserRouter` or `HashRouter` 16 | 17 | ### Demo 18 | 19 | ```jsx 20 |Full Code
27 |28 | 29 | 30 | ```jsx 31 | import React from "react" 32 | import {BrowserRouter, Route} from "react-router-dom" 33 | import { PrivateRoute } from 'react-auth-kit' 34 | 35 | const Routes = () => { 36 | return ( 37 |
— 🔑 —
56 |React Auth Kit is Apache 2.0 License code
57 | -------------------------------------------------------------------------------- /docs/refreshtoken.md: -------------------------------------------------------------------------------- 1 | # Refresh Tokens 2 | 3 | Often JWT comes with a new challenge. 4 | You have to `refresh` the JWT token periodically using a token, named Refresh token. 5 | 6 | > A refresh token is a special kind of token used to obtain a renewed access token. 7 | You can request new access tokens until the refresh token is on the DenyList. 8 | Applications must store refresh tokens securely because they essentially allow a user to remain authenticated forever. 9 | 10 | React Auth Kit implements an easy approach to integrate the refresh token. 11 | 12 | You can either use the refresh token in your application or you can leave it. 13 | 14 | --- 15 | 16 | ## API Builder 17 | To build the refresh token API, you have to use `createRefresh` function. 18 | It is an identity function. It is mainly used for typechecking and mobility. 19 | 20 | ### createRefresh 21 | 22 | `#!js createRefresh(options) => refreshApi` 23 | 24 | Generate a refreshApi based on the options received 25 | 26 | #### Arguments 27 | 28 | `options` (object): Takes a refresh object. It has 2 parameters 29 | 30 | 1. `refreshApiCallback` (function): This is an API function. Inside this function, you have to add a network request API. See the [details](#refreshapicallback) 31 | 2. `interval` (number): The time interval in minutes, by which the `refreshApiCallback` is called and the state is updated 32 | 33 | #### Returns 34 | A complete object of refresh token API. Add this object in the `AuthProvider` as a prop to implement the feature. 35 | 36 | ```js 37 | import {createRefresh} from 'react-auth-kit' 38 | 39 | const refreshApi = createRefresh({ 40 | interval: 10, // Refreshs the token in every 10 minutes 41 | refreshApiCallback: param => { // API container function 42 | return { 43 | isSuccess: true, 44 | } 45 | } 46 | }) 47 | 48 | export default refreshApi 49 | ``` 50 | 51 | --- 52 | ### refreshApiCallback 53 | The container for refresh API 54 | 55 | #### Arguments 56 | The function has only one argument, which is the `object` of the latest state. 57 | 58 | The object contains: 59 | 60 | 1. `authToken` (string): The Auth token 61 | 2. `authTokenExpireAt` (Date) : Expiring time of the Auth token 62 | 3. `refreshToken` (string): The Refresh token 63 | 4. `refreshTokenExpiresAt` (Date): Expiring time of the refresh token 64 | 5. `authUserState` (object): The current User state 65 | 66 | #### Returns 67 | In side the function you have to return an `object` of new auth state fetched by the API. 68 | 69 | The return object must contain: 70 | 71 | 1. `isSuccess` (boolean): If the network request is successful, then make it `true`, otherwise make it false. 72 | If the value of this variable is false then the state will not changed, and it'll wait for the next time 73 | 2. `newAuthToken` (string): The value of this variable will be the new auth token. So pass the new auth token here. 74 | 3. `newAuthTokenExpireIn` (number)(optional): New time limit in minutes, after which the auth token will expire. 75 | If you leave it, the old time limit will not be changed. So if you want to add more 10 minutes, then pass 10 here. 76 | 4. `newRefreshToken` (string)(optional): Pass the new refresh token here, if you want to refresh the refresh token itself. 77 | 5. `newRefreshTokenExpiresIn` (number)(optional): New time limit in minutes, after which the refresh token will expire. Works same as `newAuthTokenExpireIn` 78 | 6. `newAuthUserState` (object)(optional): Pass the new user state. If your API updates the user state, then use this, else leave it. 79 | 80 | #### refreshApiCallback Example 81 | ```js 82 | {refreshApiCallback: ( 83 | { // arguments 84 | authToken, 85 | authTokenExpireAt, 86 | refreshToken, 87 | refreshTokenExpiresAt, 88 | authUserState 89 | }) => { 90 | axios.post('/api/refresh', 91 | { 92 | refreshToken: refreshToken, 93 | oldAuthToken: authToken 94 | } 95 | ).then(({data})=>{ 96 | return { 97 | // As the request is successful, we are passing new tokens. 98 | isSuccess: true, // For successful network request isSuccess is true 99 | newAuthToken: data.newAuthToken, 100 | newAuthTokenExpireIn: data.newAuthTokenExpireIn 101 | // You can also add new refresh token ad new user state 102 | } 103 | }).catch((e)=>{ 104 | console.error(e) 105 | return{ 106 | // As the request is unsuccessful, we are just passing the isSuccess. 107 | isSuccess:false // For unsuccessful network request isSuccess is false 108 | } 109 | }) 110 | } 111 | } 112 | ``` 113 | 114 | --- 115 | 116 | ### API Builder Example 117 | This is the overall example of how to use `createRefresh`. The example uses axios to make network request. 118 | ```js 119 | import axios from 'axios' 120 | import {useAuthHeader, createRefresh} from 'react-auth-kit' 121 | 122 | const refreshApi = createRefresh({ 123 | interval: 10, // Refreshs the token in every 10 minutes 124 | refreshApiCallback: ( 125 | { 126 | authToken, 127 | authTokenExpireAt, 128 | refreshToken, 129 | refreshTokenExpiresAt, 130 | authUserState 131 | }) => { 132 | axios.post('/api/refresh', 133 | { 134 | refreshToken: refreshToken, 135 | oldAuthToken: authToken 136 | } 137 | ).then(({data})=>{ 138 | return { 139 | isSuccess: true, // For successful network request isSuccess is true 140 | newAuthToken: data.newAuthToken, 141 | newAuthTokenExpireIn: data.newAuthTokenExpireIn 142 | // You can also add new refresh token ad new user state 143 | } 144 | }).catch((e)=>{ 145 | console.error(e) 146 | return{ 147 | isSuccess:false // For unsuccessful network request isSuccess is false 148 | } 149 | }) 150 | } 151 | }) 152 | 153 | export default refreshApi 154 | ``` 155 | 156 | ## Integration in Auth Provider. 157 | To add the refresh token feature, simply add the return value of `createRefresh` function in the `AuthProvider` as a prop. 158 | 159 | ```js 160 | import {AuthProvider} from 'react-auth-kit' 161 | import refreshApi from "./refreshApi"; 162 | 163 | function App() { 164 | return ( 165 |— 🔑 —
182 |React Auth Kit is Apache 2.0 License code
183 | -------------------------------------------------------------------------------- /docs/robots.txt: -------------------------------------------------------------------------------- 1 | Sitemap: https://authkit.arkadip.me/sitemap.xml.gz 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /docs/signout.md: -------------------------------------------------------------------------------- 1 | # Sign Out 2 | 3 | > Implement Sign Out on your React App 4 | 5 | React Auth Kit has easy to implement Sign In procedures. 6 | 7 | It supports both [`Hooks`](https://reactjs.org/docs/hooks-intro.html) and 8 | [`Higher Order Component`](https://reactjs.org/docs/higher-order-components.html) 9 | for both Functional Components and Class-based Components 10 | 11 | 12 | 13 | ## Sign Out using Hooks 14 | 15 | Sign In using Hooks need `useSignOut` hook 16 | 17 | Add the `useSignOut` hook in the component then call the `signOut` inside the component 18 | 19 | ```js 20 | import { useSignOut } from 'react-auth-kit' 21 | ``` 22 | ### Demo 23 | ```jsx 24 | import React from "react" 25 | import { useSignOut } from 'react-auth-kit' 26 | 27 | const SignInComponent = () => { 28 | const signOut = useSignOut() 29 | 30 | return ( 31 | 32 | ) 33 | } 34 | ``` 35 | 36 | 37 | ## Sign Out using Higher Order Component 38 | 39 | Sign In using Higher Order Component using `withSignOut`. 40 | 41 | Add the `withSignOut` HOC and call the `this.props.signOut` function inside the component 42 | 43 | ```js 44 | import { withSignOut } from 'react-auth-kit' 45 | ``` 46 | 47 | ### Demo 48 | ```jsx 49 | import React from "react" 50 | import { withSignOut } from 'react-auth-kit' 51 | 52 | class signOutComponent extends React.Component { 53 | 54 | render(){ 55 | return ( 56 | 57 | ) 58 | } 59 | } 60 | 61 | export default withSignIn(signInComponent) 62 | ``` 63 | 64 |— 🔑 —
65 |React Auth Kit is Apache 2.0 License code
66 | -------------------------------------------------------------------------------- /examples/cdn/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |{`Hello ${authUser().name}, your U-ID is: ${authUser().uid}`}
27 | 28 |10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /examples/create-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-with-cookie", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "latest", 10 | "react-auth-kit": "^1.4.18-0", 11 | "react-dom": "latest", 12 | "react-router-dom": "latest", 13 | "react-scripts": "^2.1.8" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3solution/react-auth-kit-master/c04e7ab2f91ad7da165402d2163b4e7d0c66f265/examples/create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /examples/create-react-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 |
{`Hello ${authUser().name}, your U-ID is: ${authUser().uid}`}
11 | 12 |Test Component
; 72 | const fakeContextValue = getFakeContextValue(getFutureDate()); 73 | 74 | render( 75 |Test Component
; 87 | const fakeDispatch = jest.fn(); 88 | const fakeContextValue = getFakeContextValue(getPastDate(), fakeDispatch); 89 | 90 | render( 91 |Test Component
; 104 | const fakeContextValue = getFakeContextValue(getFutureDate()); 105 | 106 | render( 107 |( 39 | Component: React.ComponentType
, 40 | ):React.FunctionComponent
{
41 | return (props) => {
42 | return (
43 | (
38 | Component: React.ComponentType ,
39 | ): React.FunctionComponent {
40 | return (props: P)=>{
41 | return (
42 | (
40 | Component: React.ComponentType ,
41 | ): React.FunctionComponent {
42 | return (props) => {
43 | return (
44 | (
40 | Component: React.ComponentType ,
41 | ):React.FunctionComponent {
42 | return (props) => {
43 | return (
44 | (
39 | Component: React.ComponentType ,
40 | ): React.FunctionComponent {
41 | return (props) => {
42 | return (
43 |