Skip to content

Commit 48f5bf7

Browse files
lakhansamanilakhansamani
committed
chore: update example
1 parent a2feadd commit 48f5bf7

22 files changed

Lines changed: 153 additions & 90 deletions

‎README.md‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,26 @@ OR
2020
yarn add @authorizerdev/authorizer-react
2121
```
2222

23-
## Step 3 - Configure Provider and use Authorizer Components
23+
## Step 3 - Import Styles
24+
25+
Import the Authorizer styles in your application entry point:
26+
27+
```jsx
28+
// In your main entry file (e.g., index.js, App.js, or _app.js)
29+
import '@authorizerdev/authorizer-react/styles.css';
30+
```
31+
32+
**Note:** The library uses CSS variables for theming. You can customize the appearance by overriding CSS variables in your own stylesheet:
33+
34+
```css
35+
:root {
36+
--authorizer-primary-color: #your-color;
37+
--authorizer-text-color: #your-text-color;
38+
/* See src/styles/default.css for all available variables */
39+
}
40+
```
41+
42+
## Step 4 - Configure Provider and use Authorizer Components
2443

2544
Authorizer comes with [react context](https://reactjs.org/docs/context.html) which serves as `Provider` component for the application
2645

@@ -45,6 +64,30 @@ const App = () => {
4564
</AuthorizerProvider>
4665
);
4766
};
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+
```
4891

4992
const LoginSignup = () => {
5093
return <Authorizer />;

‎example/package-lock.json‎

Lines changed: 14 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import { BrowserRouter } from 'react-router-dom';
44
import { AuthorizerProvider } from 'authorizer-react';
5+
// Import Authorizer styles - using relative path for local development
6+
import '../../dist/styles.css';
57
import App from './App';
68
import './index.css';
79

‎example/vite.config.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ export default defineConfig({
99
alias: [
1010
{
1111
find: 'authorizer-react',
12-
replacement: path.resolve(__dirname, '../dist/authorizer-react.esm.js'),
12+
replacement: path.resolve(__dirname, '../dist/index.mjs'),
13+
},
14+
{
15+
find: 'authorizer-react/dist/styles.css',
16+
replacement: path.resolve(__dirname, '../dist/styles.css'),
1317
},
1418
],
1519
},

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"types": "./dist/index.d.ts",
1010
"import": "./dist/index.mjs",
1111
"require": "./dist/index.cjs"
12-
}
12+
},
13+
"./styles.css": "./dist/styles.css"
1314
},
1415
"files": [
1516
"dist",

‎src/components/AuthorizerBasicAuthLogin.tsx‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { AuthToken, LoginRequest } from '@authorizerdev/authorizer-js';
33
import isEmail from 'validator/es/lib/isEmail';
44
import isMobilePhone from 'validator/es/lib/isMobilePhone';
55

6-
import styles from '../styles/default.css';
6+
import '../styles/default.css';
77
import { ButtonAppearance, MessageType, Views } from '../constants';
88
import { useAuthorizer } from '../contexts/AuthorizerContext';
99
import { StyledButton, StyledFooter, StyledLink } from '../styledComponents';
@@ -223,9 +223,9 @@ export const AuthorizerBasicAuthLogin: FC<{
223223
)}
224224
<>
225225
<form onSubmit={onSubmit} name="authorizer-login-form">
226-
<div className={styles['styled-form-group']}>
226+
<div className="styled-form-group">
227227
<label
228-
className={styles['form-input-label']}
228+
className="form-input-label"
229229
htmlFor="authorizer-login-email"
230230
>
231231
<span>* </span>
@@ -234,10 +234,8 @@ export const AuthorizerBasicAuthLogin: FC<{
234234
<input
235235
name="email_or_phone_number"
236236
id="authorizer-login-email-or-phone-number"
237-
className={`${styles['form-input-field']} ${
238-
errorData.email_or_phone_number
239-
? styles['input-error-content']
240-
: null
237+
className={`form-input-field ${
238+
errorData.email_or_phone_number ? 'input-error-content' : ''
241239
}`}
242240
placeholder={getEmailPhonePlaceholder(config)}
243241
type="text"
@@ -247,33 +245,31 @@ export const AuthorizerBasicAuthLogin: FC<{
247245
}
248246
/>
249247
{errorData.email_or_phone_number && (
250-
<div className={styles['form-input-error']}>
248+
<div className="form-input-error">
251249
{errorData.email_or_phone_number}
252250
</div>
253251
)}
254252
</div>
255-
<div className={styles['styled-form-group']}>
253+
<div className="styled-form-group">
256254
<label
257-
className={styles['form-input-label']}
255+
className="form-input-label"
258256
htmlFor="authorizer-login-password"
259257
>
260258
<span>* </span>Password
261259
</label>
262260
<input
263261
name="password"
264262
id="authorizer-login-password"
265-
className={`${styles['form-input-field']} ${
266-
errorData.password ? styles['input-error-content'] : null
263+
className={`form-input-field ${
264+
errorData.password ? 'input-error-content' : ''
267265
}`}
268266
placeholder="********"
269267
type="password"
270268
value={formData.password || ''}
271269
onChange={e => onInputChange('password', e.target.value)}
272270
/>
273271
{errorData.password && (
274-
<div className={styles['form-input-error']}>
275-
{errorData.password}
276-
</div>
272+
<div className="form-input-error">{errorData.password}</div>
277273
)}
278274
</div>
279275
<br />

‎src/components/AuthorizerForgotPassword.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react';
22
import isEmail from 'validator/es/lib/isEmail';
33
import isMobilePhone from 'validator/es/lib/isMobilePhone';
44

5-
import styles from '../styles/default.css';
5+
import '../styles/default.css';
66
import { ButtonAppearance, MessageType, Views } from '../constants';
77
import { useAuthorizer } from '../contexts/AuthorizerContext';
88
import { StyledButton, StyledFooter, StyledLink } from '../styledComponents';
@@ -151,9 +151,9 @@ export const AuthorizerForgotPassword: FC<{
151151
</p>
152152
<br />
153153
<form onSubmit={onSubmit} name="authorizer-forgot-password-form">
154-
<div className={styles['styled-form-group']}>
154+
<div className="styled-form-group">
155155
<label
156-
className={styles['form-input-label']}
156+
className="form-input-label"
157157
htmlFor="authorizer-forgot-password-email-or-phone-number"
158158
>
159159
<span>* </span>
@@ -162,10 +162,10 @@ export const AuthorizerForgotPassword: FC<{
162162
<input
163163
name="email_or_phone_number"
164164
id="authorizer-forgot-password-email-or-phone-number"
165-
className={`${styles['form-input-field']} ${
165+
className={`form-input-field ${
166166
errorData.email_or_phone_number
167-
? styles['input-error-content']
168-
: null
167+
? 'input-error-content'
168+
: ''
169169
}`}
170170
placeholder={getEmailPhonePlaceholder(config)}
171171
type="text"
@@ -175,7 +175,7 @@ export const AuthorizerForgotPassword: FC<{
175175
}
176176
/>
177177
{errorData.email_or_phone_number && (
178-
<div className={styles['form-input-error']}>
178+
<div className="form-input-error">
179179
{errorData.email_or_phone_number}
180180
</div>
181181
)}

‎src/components/AuthorizerMagicLinkLogin.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, useEffect, useState } from 'react';
22
import isEmail from 'validator/es/lib/isEmail';
33

4-
import styles from '../styles/default.css';
4+
import '../styles/default.css';
55
import { ButtonAppearance, MessageType } from '../constants';
66
import { useAuthorizer } from '../contexts/AuthorizerContext';
77
import { StyledButton } from '../styledComponents';
@@ -98,26 +98,26 @@ export const AuthorizerMagicLinkLogin: FC<{
9898
<Message type={MessageType.Error} text={error} onClose={onErrorClose} />
9999
)}
100100
<form onSubmit={onSubmit} name="authorizer-magic-login-form">
101-
<div className={styles['styled-form-group']}>
101+
<div className="styled-form-group">
102102
<label
103-
className={styles['form-input-label']}
103+
className="form-input-label"
104104
htmlFor="authorizer-magic-link-login-email"
105105
>
106106
<span>* </span>Email
107107
</label>
108108
<input
109109
name="email"
110110
id="authorizer-magic-link-login-email"
111-
className={`${styles['form-input-field']} ${
112-
errorData.email ? styles['input-error-content'] : null
111+
className={`form-input-field ${
112+
errorData.email ? 'input-error-content' : ''
113113
}`}
114114
placeholder="eg. foo@bar.com"
115115
type="email"
116116
value={formData.email || ''}
117117
onChange={(e) => onInputChange('email', e.target.value)}
118118
/>
119119
{errorData.email && (
120-
<div className={styles['form-input-error']}>{errorData.email}</div>
120+
<div className="form-input-error">{errorData.email}</div>
121121
)}
122122
</div>
123123
<br />

0 commit comments

Comments
 (0)