https://github.com/authorizerdev/authorizer-react
React library for [authorizer.dev](https://authorizer.dev/)
https://github.com/authorizerdev/authorizer-react
authorizer hacktoberfest react
Last synced: 10 months ago
JSON representation
React library for [authorizer.dev](https://authorizer.dev/)
- Host: GitHub
- URL: https://github.com/authorizerdev/authorizer-react
- Owner: authorizerdev
- License: mit
- Created: 2021-07-18T12:31:56.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-15T12:18:49.000Z (over 1 year ago)
- Last Synced: 2025-03-31T14:09:31.171Z (10 months ago)
- Topics: authorizer, hacktoberfest, react
- Language: TypeScript
- Homepage:
- Size: 4.63 MB
- Stars: 21
- Watchers: 4
- Forks: 18
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# authorizer-react
Authorizer React SDK allows you to implement authentication in your [React](https://reactjs.org/) application quickly. It also allows you to access the user profile.
Here is a quick guide on getting started with `@authorizerdev/authorizer-react` package.
## Code Sandbox Demo: https://codesandbox.io/s/authorizer-demo-qgjpw
## Step 1 - Create Instance
Get Authorizer URL by instantiating [Authorizer instance](/deployment) and configuring it with necessary [environment variables](/core/env).
## Step 2 - Install package
Install `@authorizerdev/authorizer-react` library
```sh
npm i --save @authorizerdev/authorizer-react
OR
yarn add @authorizerdev/authorizer-react
```
## Step 3 - Configure Provider and use Authorizer Components
Authorizer comes with [react context](https://reactjs.org/docs/context.html) which serves as `Provider` component for the application
```jsx
import {
AuthorizerProvider,
Authorizer,
useAuthorizer,
} from '@authorizerdev/authorizer-react';
const App = () => {
return (
);
};
const LoginSignup = () => {
return ;
};
const Profile = () => {
const { user } = useAuthorizer();
if (user) {
return
{user.email};
}
return null;
};
```
## Commands
### Local Development
The recommended workflow is to run authorizer in one terminal:
```bash
npm start # or yarn start
```
This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
Then run either Storybook or the example playground:
### Example
Then run the example inside another:
```bash
cd example
npm i # or yarn to install dependencies
npm start # or yarn start
```
The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
To do a one-off build, use `npm run build` or `yarn build`.
To run tests, use `npm test` or `yarn test`.
## Configuration
Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
### Storybook commands
```bash
npm run storybook
```
```bash
npm run build-storybook
```
### Jest
Jest tests are set up to run with `npm test` or `yarn test`.
### Bundle analysis
Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.