Skip to content

Commit 40900ee

Browse files
lakhansamanilakhansamani
committed
docs: update README for v2.1.0
1 parent 492d479 commit 40900ee

1 file changed

Lines changed: 79 additions & 82 deletions

File tree

‎README.md‎

Lines changed: 79 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,45 @@
11
# authorizer-react
22

3-
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.
4-
5-
Here is a quick guide on getting started with `@authorizerdev/authorizer-react` package.
3+
React SDK for [authorizer.dev](https://authorizer.dev). Adds authentication to your [React](https://reactjs.org/) application in minutes. Current version: **2.1.0**.
64

75
## Code Sandbox Demo: https://codesandbox.io/s/authorizer-demo-qgjpw
86

9-
## Step 1 - Create Instance
7+
## Step 1 - Create an Authorizer instance
108

11-
Get Authorizer URL by instantiating [Authorizer instance](/deployment) and configuring it with necessary [environment variables](/core/env).
9+
Deploy an Authorizer instance and grab the URL and client ID from the dashboard. See the [deployment guide](https://docs.authorizer.dev/deployment).
1210

1311
## Step 2 - Install package
1412

15-
Install `@authorizerdev/authorizer-react` library
16-
1713
```sh
1814
npm i --save @authorizerdev/authorizer-react
19-
OR
15+
# or
2016
yarn add @authorizerdev/authorizer-react
2117
```
2218

23-
## Step 3 - Import Styles
24-
25-
Import the Authorizer styles in your application entry point:
19+
## Step 3 - Import styles
2620

2721
```jsx
28-
// In your main entry file (e.g., index.js, App.js, or _app.js)
22+
// In your entry file (index.js, App.js, _app.js, etc.)
2923
import '@authorizerdev/authorizer-react/styles.css';
3024
```
3125

32-
**Note:** The library uses CSS variables for theming. You can customize the appearance by overriding CSS variables in your own stylesheet:
26+
Override the default theme using CSS variables:
3327

3428
```css
3529
:root {
36-
--authorizer-primary-color: #your-color;
37-
--authorizer-text-color: #your-text-color;
38-
/* See src/styles/default.css for all available variables */
30+
--authorizer-primary-color: #3b82f6;
31+
--authorizer-primary-disabled-color: #60a5fa;
32+
--authorizer-danger-color: #dc2626;
33+
--authorizer-success-color: #10b981;
34+
--authorizer-text-color: #374151;
35+
--authorizer-fonts-font-stack: -apple-system, system-ui, sans-serif;
36+
--authorizer-fonts-medium-text: 14px;
37+
--authorizer-radius-button: 5px;
38+
--authorizer-radius-input: 5px;
3939
}
4040
```
4141

42-
## Step 4 - Configure Provider and use Authorizer Components
43-
44-
Authorizer comes with [react context](https://reactjs.org/docs/context.html) which serves as `Provider` component for the application
42+
## Step 4 - Configure provider and use components
4543

4644
```jsx
4745
import {
@@ -58,100 +56,99 @@ const App = () => {
5856
redirectURL: window.location.origin,
5957
clientID: 'YOUR_CLIENT_ID',
6058
}}
59+
// optional — 'graphql' (default) or 'rest'
60+
protocol="graphql"
6161
>
6262
<LoginSignup />
6363
<Profile />
6464
</AuthorizerProvider>
6565
);
6666
};
67-
```
68-
69-
### Theming
70-
71-
Authorizer components can be customized using CSS variables. Override these variables in your CSS:
72-
73-
```css
74-
:root {
75-
/* Colors */
76-
--authorizer-primary-color: #3b82f6;
77-
--authorizer-primary-disabled-color: #60a5fa;
78-
--authorizer-danger-color: #dc2626;
79-
--authorizer-success-color: #10b981;
80-
--authorizer-text-color: #374151;
81-
82-
/* Typography */
83-
--authorizer-fonts-font-stack: -apple-system, system-ui, sans-serif;
84-
--authorizer-fonts-medium-text: 14px;
85-
86-
/* Border Radius */
87-
--authorizer-radius-button: 5px;
88-
--authorizer-radius-input: 5px;
89-
}
90-
```
9167

9268
const LoginSignup = () => {
9369
return <Authorizer />;
9470
};
9571

9672
const Profile = () => {
9773
const { user } = useAuthorizer();
98-
9974
if (user) {
10075
return <div>{user.email}</div>;
10176
}
102-
10377
return null;
10478
};
10579
```
10680

107-
## Commands
108-
109-
### Local Development
110-
111-
The recommended workflow is to run authorizer in one terminal:
81+
### `AuthorizerProvider` props
82+
83+
| Prop | Type | Required | Description |
84+
| ---------------------- | --------------------------- | -------- | ------------------------------------------------ |
85+
| `config` | `ConfigType` | Yes | Authorizer connection config (see below) |
86+
| `protocol` | `'graphql' \| 'rest'` | No | Transport protocol. Defaults to `'graphql'` |
87+
| `onStateChangeCallback` | `(state: AuthorizerState) => void` | No | Called whenever auth state changes |
88+
89+
The `protocol` prop selects which transport the underlying `authorizer-js` SDK uses. Use `'rest'` if your deployment restricts the GraphQL endpoint.
90+
91+
### `config` fields
92+
93+
| Field | Type | Description |
94+
| --------------------------------------- | --------- | ------------------------------------------------------- |
95+
| `authorizerURL` | `string` | Base URL of your Authorizer instance |
96+
| `redirectURL` | `string` | URL to redirect to after login |
97+
| `clientID` | `string` | Client ID from the dashboard |
98+
| `is_google_login_enabled` | `boolean` | Google social login |
99+
| `is_github_login_enabled` | `boolean` | GitHub social login |
100+
| `is_facebook_login_enabled` | `boolean` | Facebook social login |
101+
| `is_linkedin_login_enabled` | `boolean` | LinkedIn social login |
102+
| `is_apple_login_enabled` | `boolean` | Apple social login |
103+
| `is_twitter_login_enabled` | `boolean` | Twitter/X social login |
104+
| `is_microsoft_login_enabled` | `boolean` | Microsoft social login |
105+
| `is_twitch_login_enabled` | `boolean` | Twitch social login |
106+
| `is_discord_login_enabled` | `boolean` | Discord social login |
107+
| `is_roblox_login_enabled` | `boolean` | Roblox social login |
108+
| `is_basic_authentication_enabled` | `boolean` | Email/password login |
109+
| `is_magic_link_login_enabled` | `boolean` | Magic link (passwordless) login |
110+
| `is_sign_up_enabled` | `boolean` | Allow new user registration |
111+
| `is_strong_password_enabled` | `boolean` | Enforce strong password policy |
112+
| `is_multi_factor_auth_enabled` | `boolean` | TOTP-based two-factor authentication |
113+
| `is_mobile_basic_authentication_enabled`| `boolean` | Mobile (phone number + password) authentication |
114+
| `is_phone_verification_enabled` | `boolean` | Phone number OTP verification |
115+
116+
These fields are populated automatically from the server's `/api/meta` response when `AuthorizerProvider` mounts.
117+
118+
---
119+
120+
## Local Development
112121

113122
```bash
114-
npm start # or yarn start
115-
```
116-
117-
This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
118-
119-
Then run either Storybook or the example playground:
120-
121-
### Example
123+
# Build in watch mode
124+
npm start
122125

123-
Then run the example inside another:
124-
125-
```bash
126+
# Run the example app in another terminal
126127
cd example
127-
npm i # or yarn to install dependencies
128-
npm start # or yarn start
129-
```
130-
131-
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).
132-
133-
To do a one-off build, use `npm run build` or `yarn build`.
134-
135-
To run tests, use `npm test` or `yarn test`.
128+
npm i
129+
npm start
136130

137-
## Configuration
131+
# One-off build
132+
npm run build
138133

139-
Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
134+
# Tests
135+
npm test
140136

141-
### Storybook commands
142-
143-
```bash
137+
# Storybook
144138
npm run storybook
145-
```
146-
147-
```bash
148139
npm run build-storybook
140+
141+
# Bundle analysis
142+
npm run size
143+
npm run analyze
149144
```
150145

151-
### Jest
146+
---
152147

153-
Jest tests are set up to run with `npm test` or `yarn test`.
148+
## Release
154149

155-
### Bundle analysis
150+
1. Bump the version in `package.json`.
151+
2. Tag the commit: `git tag v<version>`
152+
3. Push with tags: `git push origin main --tags`
156153

157-
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`.
154+
The GitHub Actions release workflow handles npm publish and GitHub Release creation automatically.

0 commit comments

Comments
 (0)