(false);
27 |
28 | const handleContinue = () => {
29 | setIsOTPScreenVisisble(true);
30 | };
31 |
32 | if (isOTPScreenVisisble) {
33 | return (
34 |
50 | Scan the QR code or enter the secret key into your authenticator app.
51 |
52 |
53 |
58 |
59 | If you are unable to scan the QR code, please enter the secret key
60 | manually.
61 |
62 |
63 | {authenticator_secret}
64 |
65 |
67 | If you lose access to your authenticator app, you can use the recovery
68 | codes below to regain access to your account. Please save these codes
69 | safely and do not share them with anyone.
70 |
71 |
72 | {authenticator_recovery_codes.map((code, index) => {
73 | return {code} ;
74 | })}
75 |
76 |
81 | Continue
82 |
83 |
84 | );
85 | };
86 |
--------------------------------------------------------------------------------
/src/components/AuthorizerVerifyOtp.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useEffect, useState } from 'react';
2 | import { VerifyOtpInput } from '@authorizerdev/authorizer-js';
3 | import styles from '../styles/default.css';
4 |
5 | import { ButtonAppearance, MessageType, Views } from '../constants';
6 | import { useAuthorizer } from '../contexts/AuthorizerContext';
7 | import { StyledButton, StyledFooter, StyledLink } from '../styledComponents';
8 | import { Message } from './Message';
9 |
10 | interface InputDataType {
11 | otp: string | null;
12 | }
13 |
14 | export const AuthorizerVerifyOtp: FC<{
15 | setView?: (v: Views) => void;
16 | onLogin?: (data: any) => void;
17 | email?: string;
18 | phone_number?: string;
19 | urlProps?: Record;
20 | is_totp?: boolean;
21 | }> = ({ setView, onLogin, email, phone_number, urlProps, is_totp }) => {
22 | const [error, setError] = useState(``);
23 | const [successMessage, setSuccessMessage] = useState(``);
24 | const [loading, setLoading] = useState(false);
25 | const [sendingOtp, setSendingOtp] = useState(false);
26 | const [formData, setFormData] = useState({
27 | otp: null,
28 | });
29 | const [errorData, setErrorData] = useState({
30 | otp: null,
31 | });
32 | const { authorizerRef, config, setAuthData } = useAuthorizer();
33 | useEffect(() => {
34 | if (!email && !phone_number) {
35 | setError(`Email or Phone Number is required`);
36 | }
37 | }, []);
38 |
39 | const onInputChange = async (field: string, value: string) => {
40 | setFormData({ ...formData, [field]: value });
41 | };
42 |
43 | const onSubmit = async (e: any) => {
44 | e.preventDefault();
45 | setSuccessMessage(``);
46 | try {
47 | setLoading(true);
48 | const data: VerifyOtpInput = {
49 | email,
50 | phone_number,
51 | otp: formData.otp || '',
52 | };
53 | if (urlProps?.state) {
54 | data.state = urlProps.state;
55 | }
56 | data.is_totp = !!is_totp;
57 | const { data: res, errors } = await authorizerRef.verifyOtp(data);
58 | setLoading(false);
59 | if (errors && errors.length) {
60 | setError(errors[0]?.message || ``);
61 | return;
62 | }
63 | if (res) {
64 | setError(``);
65 | setAuthData({
66 | user: res.user || null,
67 | token: {
68 | access_token: res.access_token,
69 | expires_in: res.expires_in,
70 | refresh_token: res.refresh_token,
71 | id_token: res.id_token,
72 | },
73 | config,
74 | loading: false,
75 | });
76 | }
77 |
78 | if (onLogin) {
79 | onLogin(res);
80 | }
81 | } catch (err) {
82 | setLoading(false);
83 | setError((err as Error).message);
84 | }
85 | };
86 |
87 | const onErrorClose = () => {
88 | setError(``);
89 | };
90 |
91 | const onSuccessClose = () => {
92 | setSuccessMessage(``);
93 | };
94 |
95 | const resendOtp = async () => {
96 | setSuccessMessage(``);
97 | try {
98 | setSendingOtp(true);
99 |
100 | const { data: res, errors } = await authorizerRef.resendOtp({
101 | email,
102 | phone_number,
103 | });
104 | setSendingOtp(false);
105 | if (errors && errors.length) {
106 | setError(errors[0]?.message || ``);
107 | return;
108 | }
109 |
110 | if (res && res?.message) {
111 | setError(``);
112 | setSuccessMessage(res.message);
113 | }
114 |
115 | if (onLogin) {
116 | onLogin(res);
117 | }
118 | } catch (err) {
119 | setLoading(false);
120 | setError((err as Error).message);
121 | }
122 | };
123 |
124 | useEffect(() => {
125 | if (formData.otp === '') {
126 | setErrorData({ ...errorData, otp: 'OTP is required' });
127 | } else {
128 | setErrorData({ ...errorData, otp: null });
129 | }
130 | }, [formData.otp]);
131 |
132 | return (
133 | <>
134 | {successMessage && (
135 |
145 | Please enter the OTP sent to your email or phone number or authenticator
146 |
147 |
191 | {sendingOtp ? (
192 | Sending ...
193 | ) : (
194 |
195 | Resend OTP
196 |
197 | )}
198 | {config.is_sign_up_enabled && (
199 |
200 | Don't have an account?{' '}
201 | setView(Views.Signup)}>
202 | Sign Up
203 |
204 |
205 | )}
206 |
207 | )}
208 |
209 | );
210 | };
211 |
--------------------------------------------------------------------------------
/src/components/Message.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from 'react';
2 | import { MessageType } from '../constants';
3 | import { IconClose } from '../icons/close';
4 | import { StyledMessageWrapper, StyledFlex } from '../styledComponents';
5 | import { capitalizeFirstLetter } from '../utils/format';
6 |
7 | type Props = {
8 | type: MessageType;
9 | text: string;
10 | onClose?: () => void;
11 | extraStyles?: Record;
12 | };
13 |
14 | export const Message: FC = ({ type, text, extraStyles, onClose }) => {
15 | if (text.trim()) {
16 | return (
17 |
18 |
19 | {capitalizeFirstLetter(text)}
20 | {onClose && (
21 |
22 |
24 | )}
25 |
26 |
27 | );
28 | }
29 |
30 | return null;
31 | };
32 |
--------------------------------------------------------------------------------
/src/components/PasswordStrengthIndicator.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | StyledFlex,
4 | StyledPasswordStrengthWrapper,
5 | StyledPasswordStrength,
6 | } from '../styledComponents';
7 | import { validatePassword } from '../utils/validations';
8 |
9 | interface PropTypes {
10 | value: string;
11 | setDisableButton: Function;
12 | }
13 |
14 | const PasswordStrengthIndicator = ({ value, setDisableButton }: PropTypes) => {
15 | const [
16 | {
17 | strength,
18 | score,
19 | hasSixChar,
20 | hasLowerCase,
21 | hasNumericChar,
22 | hasSpecialChar,
23 | hasUpperCase,
24 | maxThirtySixChar,
25 | },
26 | setValidations,
27 | ] = React.useState({ ...validatePassword(value || '') });
28 |
29 | React.useEffect(() => {
30 | const validationData = validatePassword(value || '');
31 | setValidations({ ...validationData });
32 | if (!validationData.isValid) {
33 | setDisableButton(true);
34 | } else {
35 | setDisableButton(false);
36 | }
37 | }, [value]);
38 |
39 | return (
40 |
106 | );
107 | };
108 |
109 | export default PasswordStrengthIndicator;
110 |
--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | export enum Views {
2 | Login,
3 | Signup,
4 | ForgotPassword,
5 | }
6 |
7 | export enum ButtonAppearance {
8 | Primary,
9 | Default,
10 | }
11 |
12 | export enum MessageType {
13 | Error,
14 | Success,
15 | Info,
16 | }
17 |
18 | export enum AuthorizerProviderActionType {
19 | SET_USER = 'SET_USER',
20 | SET_TOKEN = 'SET_TOKEN',
21 | SET_LOADING = 'SET_LOADING',
22 | SET_AUTH_DATA = 'SET_AUTH_DATA',
23 | SET_CONFIG = 'SET_CONFIG',
24 | }
25 |
26 | // TODO use based on theme primary color
27 | export const passwordStrengthIndicatorOpacity: Record = {
28 | default: 0.15,
29 | weak: 0.4,
30 | good: 0.6,
31 | strong: 0.8,
32 | veryStrong: 1,
33 | };
34 |
--------------------------------------------------------------------------------
/src/contexts/AuthorizerContext.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | FC,
3 | createContext,
4 | useReducer,
5 | useContext,
6 | useRef,
7 | useEffect,
8 | } from 'react';
9 | import { Authorizer, User, AuthToken } from '@authorizerdev/authorizer-js';
10 |
11 | import {
12 | AuthorizerContextPropsType,
13 | AuthorizerState,
14 | AuthorizerProviderAction,
15 | } from '../types';
16 | import { AuthorizerProviderActionType } from '../constants';
17 | import { hasWindow } from '../utils/window';
18 |
19 | const AuthorizerContext = createContext({
20 | config: {
21 | authorizerURL: '',
22 | redirectURL: '/',
23 | client_id: '',
24 | is_google_login_enabled: false,
25 | is_github_login_enabled: false,
26 | is_facebook_login_enabled: false,
27 | is_linkedin_login_enabled: false,
28 | is_apple_login_enabled: false,
29 | is_twitter_login_enabled: false,
30 | is_microsoft_login_enabled: false,
31 | is_twitch_login_enabled: false,
32 | is_roblox_login_enabled: false,
33 | is_email_verification_enabled: false,
34 | is_basic_authentication_enabled: false,
35 | is_magic_link_login_enabled: false,
36 | is_sign_up_enabled: false,
37 | is_strong_password_enabled: true,
38 | is_multi_factor_auth_enabled: false,
39 | is_mobile_basic_authentication_enabled: false,
40 | is_phone_verification_enabled: false,
41 | },
42 | user: null,
43 | token: null,
44 | loading: false,
45 | setLoading: () => {},
46 | setToken: () => {},
47 | setUser: () => {},
48 | setAuthData: () => {},
49 | authorizerRef: new Authorizer({
50 | authorizerURL: `http://localhost:8080`,
51 | redirectURL: hasWindow() ? window.location.origin : '/',
52 | clientID: '',
53 | }),
54 | logout: async () => {},
55 | });
56 |
57 | function reducer(
58 | state: AuthorizerState,
59 | action: AuthorizerProviderAction
60 | ): AuthorizerState {
61 | switch (action.type) {
62 | case AuthorizerProviderActionType.SET_USER:
63 | return { ...state, user: action.payload.user };
64 | case AuthorizerProviderActionType.SET_TOKEN:
65 | return {
66 | ...state,
67 | token: action.payload.token,
68 | };
69 | case AuthorizerProviderActionType.SET_LOADING:
70 | return {
71 | ...state,
72 | loading: action.payload.loading,
73 | };
74 | case AuthorizerProviderActionType.SET_CONFIG:
75 | return {
76 | ...state,
77 | config: action.payload.config,
78 | };
79 | case AuthorizerProviderActionType.SET_AUTH_DATA:
80 | return {
81 | ...action.payload,
82 | };
83 |
84 | default:
85 | throw new Error();
86 | }
87 | }
88 |
89 | let initialState: AuthorizerState = {
90 | user: null,
91 | token: null,
92 | loading: true,
93 | config: {
94 | authorizerURL: '',
95 | redirectURL: '/',
96 | client_id: '',
97 | is_google_login_enabled: false,
98 | is_github_login_enabled: false,
99 | is_facebook_login_enabled: false,
100 | is_linkedin_login_enabled: false,
101 | is_apple_login_enabled: false,
102 | is_twitter_login_enabled: false,
103 | is_microsoft_login_enabled: false,
104 | is_twitch_login_enabled: false,
105 | is_roblox_login_enabled: false,
106 | is_email_verification_enabled: false,
107 | is_basic_authentication_enabled: false,
108 | is_magic_link_login_enabled: false,
109 | is_sign_up_enabled: false,
110 | is_strong_password_enabled: true,
111 | is_multi_factor_auth_enabled: false,
112 | is_mobile_basic_authentication_enabled: false,
113 | is_phone_verification_enabled: false,
114 | },
115 | };
116 |
117 | export const AuthorizerProvider: FC<{
118 | children: React.ReactNode;
119 | config: {
120 | authorizerURL: string;
121 | redirectURL: string;
122 | clientID?: string;
123 | };
124 | onStateChangeCallback?: (stateData: AuthorizerState) => Promise;
125 | }> = ({ config: defaultConfig, onStateChangeCallback, children }) => {
126 | const [state, dispatch] = useReducer(reducer, {
127 | ...initialState,
128 | config: {
129 | ...initialState.config,
130 | ...defaultConfig,
131 | },
132 | });
133 |
134 | let intervalRef: any = null;
135 |
136 | const authorizerRef = useRef(
137 | new Authorizer({
138 | authorizerURL: state.config.authorizerURL,
139 | redirectURL: hasWindow()
140 | ? state.config.redirectURL || window.location.origin
141 | : state.config.redirectURL || '/',
142 | clientID: state.config.client_id,
143 | })
144 | );
145 |
146 | const getToken = async () => {
147 | const {
148 | data: metaRes,
149 | errors: metaResErrors,
150 | } = await authorizerRef.current.getMetaData();
151 | try {
152 | if (metaResErrors && metaResErrors.length) {
153 | throw new Error(metaResErrors[0].message);
154 | }
155 | const { data: res, errors } = await authorizerRef.current.getSession();
156 | if (errors && errors.length) {
157 | throw new Error(errors[0].message);
158 | }
159 | if (res && res.access_token && res.user) {
160 | const token = {
161 | access_token: res.access_token,
162 | expires_in: res.expires_in,
163 | id_token: res.id_token,
164 | refresh_token: res.refresh_token || '',
165 | };
166 | dispatch({
167 | type: AuthorizerProviderActionType.SET_AUTH_DATA,
168 | payload: {
169 | ...state,
170 | token,
171 | user: res.user,
172 | config: {
173 | ...state.config,
174 | ...metaRes,
175 | },
176 | loading: false,
177 | },
178 | });
179 |
180 | // const millisecond = getIntervalDiff(res.expires_at);
181 | // if (millisecond > 0) {
182 | // if (intervalRef) clearInterval(intervalRef);
183 | // intervalRef = setInterval(() => {
184 | // getToken();
185 | // }, millisecond);
186 | // }
187 | if (intervalRef) clearInterval(intervalRef);
188 | intervalRef = setInterval(() => {
189 | getToken();
190 | }, res.expires_in * 1000);
191 | } else {
192 | dispatch({
193 | type: AuthorizerProviderActionType.SET_AUTH_DATA,
194 | payload: {
195 | ...state,
196 | token: null,
197 | user: null,
198 | config: {
199 | ...state.config,
200 | ...metaRes,
201 | },
202 | loading: false,
203 | },
204 | });
205 | }
206 | } catch (err) {
207 | dispatch({
208 | type: AuthorizerProviderActionType.SET_AUTH_DATA,
209 | payload: {
210 | ...state,
211 | token: null,
212 | user: null,
213 | config: {
214 | ...state.config,
215 | ...metaRes,
216 | },
217 | loading: false,
218 | },
219 | });
220 | }
221 | };
222 |
223 | useEffect(() => {
224 | getToken();
225 | return () => {
226 | if (intervalRef) {
227 | clearInterval(intervalRef);
228 | }
229 | };
230 | }, []);
231 |
232 | useEffect(() => {
233 | if (onStateChangeCallback) {
234 | onStateChangeCallback(state);
235 | }
236 | }, [state]);
237 |
238 | const handleTokenChange = (token: AuthToken | null) => {
239 | dispatch({
240 | type: AuthorizerProviderActionType.SET_TOKEN,
241 | payload: {
242 | token,
243 | },
244 | });
245 |
246 | if (token?.access_token) {
247 | if (intervalRef) clearInterval(intervalRef);
248 | intervalRef = setInterval(() => {
249 | getToken();
250 | }, token.expires_in * 1000);
251 | }
252 | };
253 |
254 | const setAuthData = (data: AuthorizerState) => {
255 | dispatch({
256 | type: AuthorizerProviderActionType.SET_AUTH_DATA,
257 | payload: data,
258 | });
259 |
260 | if (data.token?.access_token) {
261 | if (intervalRef) clearInterval(intervalRef);
262 | intervalRef = setInterval(() => {
263 | getToken();
264 | }, data.token.expires_in * 1000);
265 | }
266 | };
267 |
268 | const setUser = (user: User | null) => {
269 | dispatch({
270 | type: AuthorizerProviderActionType.SET_USER,
271 | payload: {
272 | user,
273 | },
274 | });
275 | };
276 |
277 | const setLoading = (loading: boolean) => {
278 | dispatch({
279 | type: AuthorizerProviderActionType.SET_LOADING,
280 | payload: {
281 | loading,
282 | },
283 | });
284 | };
285 |
286 | const logout = async () => {
287 | dispatch({
288 | type: AuthorizerProviderActionType.SET_LOADING,
289 | payload: {
290 | loading: true,
291 | },
292 | });
293 | await authorizerRef.current.logout();
294 | const loggedOutState = {
295 | user: null,
296 | token: null,
297 | loading: false,
298 | config: state.config,
299 | };
300 | dispatch({
301 | type: AuthorizerProviderActionType.SET_AUTH_DATA,
302 | payload: loggedOutState,
303 | });
304 | };
305 |
306 | return (
307 |
318 | {children}
319 |
320 | );
321 | };
322 |
323 | export const useAuthorizer = () => useContext(AuthorizerContext);
324 |
--------------------------------------------------------------------------------
/src/icons/apple.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const Apple = () => {
4 | return (
5 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/icons/close.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const IconClose = () => (
4 |
10 |
11 |
16 |
17 | );
18 |
--------------------------------------------------------------------------------
/src/icons/facebook.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const Facebook = () => {
4 | return (
5 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/icons/github.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const Github = () => {
4 | return (
5 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/icons/google.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const Google = () => {
4 | return (
5 |
13 |
14 |
15 |
32 |
33 |
13 |
19 |
36 |
13 |
17 |
= {
9 | title: 'Example/StyledButton',
10 | component: StyledButton,
11 | parameters: {
12 | // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
13 | layout: 'centered',
14 | },
15 | argTypes: {
16 | appearance: {
17 | control: 'select',
18 | options: [ButtonAppearance.Default, ButtonAppearance.Primary]
19 | },
20 | type: {
21 | control: 'select',
22 | options: ['button', 'submit', 'reset']
23 | }
24 | },
25 | // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
26 | args: {
27 | onClick: fn(),
28 | type: 'button'
29 | },
30 | };
31 |
32 | export default meta;
33 | type Story = StoryObj;
34 |
35 | // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
36 | export const Default: Story = {
37 | args: {
38 | appearance: ButtonAppearance.Default,
39 | children: 'Default Button'
40 | },
41 | };
42 |
43 | export const Primary: Story = {
44 | args: {
45 | appearance: ButtonAppearance.Primary,
46 | children: 'Primary Button'
47 | },
48 | };
49 |
50 | export const DefaultDisabled: Story = {
51 | args: {
52 | appearance: ButtonAppearance.Default,
53 | children: 'Primary Button',
54 | disabled: true
55 | },
56 | };
57 |
58 | export const PrimaryDisabled: Story = {
59 | args: {
60 | appearance: ButtonAppearance.Primary,
61 | children: 'Primary Button',
62 | disabled: true
63 | },
64 | };
65 |
--------------------------------------------------------------------------------
/src/stories/StyledFlex.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { Meta, StoryObj } from '@storybook/react';
3 |
4 | import StyledFlex from '../styledComponents/StyledFlex';
5 |
6 | type TemplateArgs = React.ComponentProps;
7 |
8 | const meta: Meta = {
9 | title: 'Example/StyledFlex',
10 | component: StyledFlex,
11 | argTypes: {
12 | flexDirection: {
13 | control: 'select',
14 | options: ['row', 'row-reverse', 'column', 'column-reverse']
15 | },
16 | wrap: {
17 | control: 'select',
18 | options: ['nowrap', 'wrap', 'wrap-reverse']
19 | },
20 | children: Element
21 | },
22 | args: {
23 | flexDirection: 'row',
24 | wrap: 'nowrap'
25 | },
26 | render: ({...args}) => (
27 |
28 | At least 6 characters
30 |
31 | )
32 | };
33 |
34 | export default meta;
35 | type Story = StoryObj;
36 |
37 | // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
38 | export const RowStyledFlex: Story = {
39 | args: {
40 | flexDirection: 'row',
41 | wrap: 'nowrap',
42 | },
43 | };
44 |
45 | export const ColumnStyledFlex: Story = {
46 | args: {
47 | flexDirection: 'column',
48 | wrap: 'nowrap'
49 | },
50 | };
51 |
--------------------------------------------------------------------------------
/src/stories/assets/accessibility.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/authorizerdev/authorizer-react/6a39f3de73f8b019bf746bdd5d6daddf58420e1a/src/stories/assets/accessibility.png
--------------------------------------------------------------------------------
/src/stories/assets/accessibility.svg:
--------------------------------------------------------------------------------
1 | Accessibility ;
17 | appearance?: ButtonAppearance;
18 | disabled?: boolean;
19 | onClick?: MouseEventHandler;
20 | children: ReactNode;
21 | }) => {
22 | return (
23 |
42 | {children}
43 |
44 | );
45 | };
46 |
47 | export default StyledButton;
48 |
--------------------------------------------------------------------------------
/src/styledComponents/StyledFlex.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import styles from '../styles/default.css';
3 |
4 | const StyledFlex = ({
5 | flexDirection = 'row',
6 | alignItems = 'center',
7 | justifyContent = 'center',
8 | wrap = 'wrap',
9 | width = 'inherit',
10 | children,
11 | }: {
12 | flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
13 | alignItems?: string;
14 | justifyContent?: string;
15 | wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
16 | width?: string;
17 | children: ReactNode;
18 | }) => {
19 | return (
20 |
30 | {children}
31 |
32 | );
33 | };
34 |
35 | export default StyledFlex;
36 |
--------------------------------------------------------------------------------
/src/styledComponents/StyledFooter.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import styles from '../styles/default.css';
3 |
4 | const StyledFooter = ({ children }: { children: ReactNode }) => {
5 | return {children}
;
6 | };
7 |
8 | export default StyledFooter;
9 |
--------------------------------------------------------------------------------
/src/styledComponents/StyledLink.tsx:
--------------------------------------------------------------------------------
1 | import React, { MouseEventHandler, ReactNode } from 'react';
2 | import styles from '../styles/default.css';
3 |
4 | const StyledLink = ({
5 | marginBottom = '0px',
6 | children,
7 | onClick,
8 | }: {
9 | marginBottom?: string;
10 | children: ReactNode;
11 | onClick: MouseEventHandler;
12 | }) => {
13 | return (
14 |
19 | {children}
20 |
21 | );
22 | };
23 |
24 | export default StyledLink;
25 |
--------------------------------------------------------------------------------
/src/styledComponents/StyledMessageWrapper.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import { MessageType } from '../constants';
3 | import styles from '../styles/default.css';
4 |
5 | const getBackgroundColor = (type: MessageType): string => {
6 | switch (type) {
7 | case MessageType.Error:
8 | return 'var(--authorizer-danger-color)';
9 | case MessageType.Success:
10 | return 'var(--authorizer-success-color)';
11 | case MessageType.Info:
12 | return 'var(--authorizer-slate-color)';
13 | default:
14 | return 'var(--authorizer-success-color)';
15 | }
16 | };
17 |
18 | const StyledMessageWrapper = ({
19 | type = MessageType.Success,
20 | styles: extraStyles = {},
21 | children,
22 | }: {
23 | type: MessageType;
24 | children: ReactNode;
25 | styles?: Record;
26 | }) => {
27 | return (
28 |
35 | {children}
36 |
37 | );
38 | };
39 |
40 | export default StyledMessageWrapper;
41 |
--------------------------------------------------------------------------------
/src/styledComponents/StyledPasswordStrength.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import { passwordStrengthIndicatorOpacity } from '../constants';
3 | import styles from '../styles/default.css';
4 |
5 | const StyledPasswordStrength = ({
6 | strength = 'default',
7 | children,
8 | }: {
9 | strength: string;
10 | children?: ReactNode;
11 | }) => {
12 | return (
13 |
17 | {children}
18 |
19 | );
20 | };
21 |
22 | export default StyledPasswordStrength;
23 |
--------------------------------------------------------------------------------
/src/styledComponents/StyledPasswordStrengthWrapper.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import styles from '../styles/default.css';
3 |
4 | const StyledPasswordStrengthWrapper = ({
5 | children,
6 | }: {
7 | children: ReactNode;
8 | }) => {
9 | return (
10 | {children}
11 | );
12 | };
13 |
14 | export default StyledPasswordStrengthWrapper;
15 |
--------------------------------------------------------------------------------
/src/styledComponents/StyledSeparator.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import styles from '../styles/default.css';
3 |
4 | const StyledSeparator = ({ children }: { children?: ReactNode }) => {
5 | return {children}
;
6 | };
7 |
8 | export default StyledSeparator;
9 |
--------------------------------------------------------------------------------
/src/styledComponents/StyledWrapper.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import styles from '../styles/default.css';
3 |
4 | const StyledWrapper = ({ children }: { children: ReactNode }) => {
5 | return {children}
;
6 | };
7 |
8 | export default StyledWrapper;
9 |
--------------------------------------------------------------------------------
/src/styledComponents/index.ts:
--------------------------------------------------------------------------------
1 | import StyledWrapper from './StyledWrapper';
2 | import StyledButton from './StyledButton';
3 | import StyledLink from './StyledLink';
4 | import StyledSeparator from './StyledSeparator';
5 | import StyledFooter from './StyledFooter';
6 | import StyledMessageWrapper from './StyledMessageWrapper';
7 | import StyledFlex from './StyledFlex';
8 | import StyledPasswordStrength from './StyledPasswordStrength';
9 | import StyledPasswordStrengthWrapper from './StyledPasswordStrengthWrapper';
10 |
11 | export {
12 | StyledWrapper,
13 | StyledButton,
14 | StyledLink,
15 | StyledSeparator,
16 | StyledFooter,
17 | StyledMessageWrapper,
18 | StyledFlex,
19 | StyledPasswordStrength,
20 | StyledPasswordStrengthWrapper,
21 | };
22 |
--------------------------------------------------------------------------------
/src/styles/default.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --authorizer-primary-color: #3b82f6;
3 | --authorizer-primary-disabled-color: #60a5fa;
4 | --authorizer-gray-color: #d1d5db;
5 | --authorizer-slate-color: #e2e8f0;
6 | --authorizer-white-color: #ffffff;
7 | --authorizer-danger-color: #dc2626;
8 | --authorizer-success-color: #10b981;
9 | --authorizer-text-color: #374151;
10 | --authorizer-fonts-font-stack: -apple-system, system-ui, sans-serif;
11 | --authorizer-fonts-large-text: 18px;
12 | --authorizer-fonts-medium-text: 14px;
13 | --authorizer-fonts-small-text: 12px;
14 | --authorizer-fonts-tiny-text: 10px;
15 | --authorizer-radius-card: 5px;
16 | --authorizer-radius-button: 5px;
17 | --authorizer-radius-input: 5px;
18 | }
19 | .styled-button {
20 | padding: 15px 10px !important;
21 | display: flex;
22 | justify-content: center;
23 | align-items: center;
24 | max-height: 64px;
25 | border-radius: var(--authorizer-radius-button);
26 | border-color: var(--authorizer-text-color) !important;
27 | border-style: solid !important;
28 | cursor: pointer;
29 | position: relative;
30 | }
31 | .styled-button:disabled {
32 | cursor: not-allowed;
33 | background-color: var(--authorizer-primary-disabled-color);
34 | }
35 | .styled-flex {
36 | display: flex;
37 | }
38 | .styled-footer {
39 | display: flex;
40 | flex-direction: column;
41 | justify-content: center;
42 | align-items: center;
43 | margin-top: 15px;
44 | }
45 | .styled-form-group {
46 | width: 100%;
47 | border: 0px;
48 | background-color: var(--authorizer-white-color);
49 | padding: 0 0 15px;
50 | }
51 | .form-input-label {
52 | padding: 2.5px;
53 | }
54 | .form-input-label > span {
55 | color: var(--authorizer-danger-color);
56 | }
57 | .form-input-field {
58 | width: 100%;
59 | margin-top: 5px;
60 | padding: 10px;
61 | display: flex;
62 | flex-direction: column;
63 | align-items: center;
64 | border-radius: var(--authorizer-radius-input);
65 | border: 1px;
66 | border-style: solid;
67 | border-color: var(--authorizer-text-color);
68 | }
69 | .input-error-content {
70 | border-color: var(--authorizer-danger-color) !important;
71 | }
72 | .input-error-content:hover {
73 | outline-color: var(--authorizer-danger-color);
74 | }
75 | .input-error-content:focus {
76 | outline-color: var(--authorizer-danger-color);
77 | }
78 | .form-input-error {
79 | font-size: 12px;
80 | font-weight: 400;
81 | color: red;
82 | border-color: var(--authorizer-danger-color);
83 | }
84 | .styled-link {
85 | color: var(--authorizer-primary-color);
86 | cursor: pointer;
87 | }
88 | .styled-message-wrapper {
89 | padding: 10px;
90 | color: white;
91 | border-radius: var(--authorizer-radius-card);
92 | margin: 10px 0px;
93 | font-size: var(--authorizer-fonts-small-text);
94 | }
95 | .styled-password-strength {
96 | width: 100%;
97 | height: 10px;
98 | flex: 0.75;
99 | border-radius: 5px;
100 | margin-right: 5px;
101 | background-color: var(--authorizer-primary-color);
102 | }
103 | .styled-password-strength-wrapper {
104 | margin: 2% 0 0;
105 | }
106 | .styled-separator {
107 | display: flex;
108 | align-items: center;
109 | text-align: center;
110 | margin: 10px 0px;
111 | }
112 | .styled-separator::before {
113 | content: '';
114 | flex: 1;
115 | border-bottom: 1px solid var(--authorizer-gray-color);
116 | }
117 | .styled-separator::after {
118 | content: '';
119 | flex: 1;
120 | border-bottom: 1px solid var(--authorizer-gray-color);
121 | }
122 | .styled-separator:not(:empty)::before {
123 | margin-right: 0.25em;
124 | }
125 | .styled-separator:not(:empty)::after {
126 | margin-left: 0.25em;
127 | }
128 | .styled-wrapper {
129 | font-family: var(--authorizer-fonts-font-stack);
130 | color: var(--authorizer-text-color);
131 | font-size: var(--authorizer-fonts-medium-text);
132 | box-sizing: border-box;
133 | width: 100%;
134 | min-width: 300px;
135 | }
136 | .styled-wrapper *,
137 | *:before,
138 | *:after {
139 | box-sizing: inherit;
140 | }
141 |
--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
1 | import { AuthToken, User, Authorizer } from '@authorizerdev/authorizer-js';
2 | import { AuthorizerProviderActionType } from '../constants';
3 |
4 | export type AuthorizerConfig = {
5 | authorizerURL: string;
6 | redirectURL: string;
7 | client_id: string;
8 | is_google_login_enabled: boolean;
9 | is_github_login_enabled: boolean;
10 | is_facebook_login_enabled: boolean;
11 | is_linkedin_login_enabled: boolean;
12 | is_apple_login_enabled: boolean;
13 | is_twitter_login_enabled: boolean;
14 | is_microsoft_login_enabled: boolean;
15 | is_twitch_login_enabled: boolean;
16 | is_roblox_login_enabled: boolean;
17 | is_email_verification_enabled: boolean;
18 | is_basic_authentication_enabled: boolean;
19 | is_magic_link_login_enabled: boolean;
20 | is_sign_up_enabled: boolean;
21 | is_strong_password_enabled: boolean;
22 | is_multi_factor_auth_enabled: boolean;
23 | is_mobile_basic_authentication_enabled: boolean;
24 | is_phone_verification_enabled: boolean;
25 | };
26 |
27 | export type AuthorizerState = {
28 | user: User | null;
29 | token: AuthToken | null;
30 | loading: boolean;
31 | config: AuthorizerConfig;
32 | };
33 |
34 | export type AuthorizerProviderAction = {
35 | type: AuthorizerProviderActionType;
36 | payload: any;
37 | };
38 |
39 | export type AuthorizerContextPropsType = {
40 | config: {
41 | authorizerURL: string;
42 | redirectURL: string;
43 | client_id: string;
44 | is_google_login_enabled: boolean;
45 | is_facebook_login_enabled: boolean;
46 | is_github_login_enabled: boolean;
47 | is_linkedin_login_enabled: boolean;
48 | is_apple_login_enabled: boolean;
49 | is_twitter_login_enabled: boolean;
50 | is_microsoft_login_enabled: boolean;
51 | is_twitch_login_enabled: boolean;
52 | is_roblox_login_enabled: boolean;
53 | is_email_verification_enabled: boolean;
54 | is_basic_authentication_enabled: boolean;
55 | is_magic_link_login_enabled: boolean;
56 | is_sign_up_enabled: boolean;
57 | is_strong_password_enabled: boolean;
58 | is_multi_factor_auth_enabled: boolean;
59 | is_mobile_basic_authentication_enabled: boolean;
60 | is_phone_verification_enabled: boolean;
61 | };
62 | user: null | User;
63 | token: null | AuthToken;
64 | loading: boolean;
65 | logout: () => Promise;
66 | setLoading: (data: boolean) => void;
67 | setUser: (data: null | User) => void;
68 | setToken: (data: null | AuthToken) => void;
69 | setAuthData: (data: AuthorizerState) => void;
70 | authorizerRef: Authorizer;
71 | };
72 |
73 | export type OtpDataType = {
74 | is_screen_visible: boolean;
75 | email?: string;
76 | phone_number?: string;
77 | is_totp?: boolean;
78 | };
79 |
80 | export type TotpDataType = {
81 | is_screen_visible: boolean;
82 | email?: string;
83 | phone_number?: string;
84 | authenticator_scanner_image: string;
85 | authenticator_secret: string;
86 | authenticator_recovery_codes: string[];
87 | };
88 |
--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css' {
2 | const content: { [className: string]: string };
3 | export default content;
4 | }
5 |
--------------------------------------------------------------------------------
/src/utils/common.ts:
--------------------------------------------------------------------------------
1 | import { hasWindow } from './window';
2 |
3 | export const getIntervalDiff = (accessTokenExpiresAt: number): number => {
4 | const expiresAt = accessTokenExpiresAt * 1000 - 300000;
5 | const currentDate = new Date();
6 |
7 | const millisecond = new Date(expiresAt).getTime() - currentDate.getTime();
8 | return millisecond;
9 | };
10 |
11 | export const getCrypto = () => {
12 | //ie 11.x uses msCrypto
13 | return hasWindow()
14 | ? ((window.crypto || (window as any).msCrypto) as Crypto)
15 | : null;
16 | };
17 |
18 | export const createRandomString = () => {
19 | const charset =
20 | '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_~.';
21 | let random = '';
22 | const crypto = getCrypto();
23 | if (crypto) {
24 | const randomValues = Array.from(crypto.getRandomValues(new Uint8Array(43)));
25 | randomValues.forEach((v) => (random += charset[v % charset.length]));
26 | }
27 | return random;
28 | };
29 |
30 | export const createQueryParams = (params: any) => {
31 | return Object.keys(params)
32 | .filter((k) => typeof params[k] !== 'undefined')
33 | .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
34 | .join('&');
35 | };
36 |
--------------------------------------------------------------------------------
/src/utils/format.ts:
--------------------------------------------------------------------------------
1 | export const formatErrorMessage = (message: string): string => {
2 | return message.replace(`[GraphQL] `, '');
3 | };
4 |
5 | export const capitalizeFirstLetter = (data: string): string => {
6 | return data.charAt(0).toUpperCase() + data.slice(1);
7 | };
8 |
--------------------------------------------------------------------------------
/src/utils/labels.ts:
--------------------------------------------------------------------------------
1 | import { AuthorizerConfig } from '../types';
2 |
3 | export const getEmailPhoneLabels = (config: AuthorizerConfig): string => {
4 | const emailLabel = 'Email';
5 | const phoneLabel = 'Phone Number';
6 | if (
7 | config.is_basic_authentication_enabled &&
8 | config.is_mobile_basic_authentication_enabled
9 | ) {
10 | return `${emailLabel} / ${phoneLabel}`;
11 | } else if (config.is_basic_authentication_enabled) {
12 | return emailLabel;
13 | } else if (config.is_mobile_basic_authentication_enabled) {
14 | return phoneLabel;
15 | }
16 | return emailLabel;
17 | };
18 |
19 | export const getEmailPhonePlaceholder = (config: AuthorizerConfig): string => {
20 | const emailPlaceholder = 'hello@world.com';
21 | const phonePlaceholder = '+919999999999';
22 | const prefix = 'eg.';
23 | if (
24 | config.is_basic_authentication_enabled &&
25 | config.is_mobile_basic_authentication_enabled
26 | ) {
27 | return `${prefix} ${emailPlaceholder} / ${phonePlaceholder}`;
28 | } else if (config.is_basic_authentication_enabled) {
29 | return `${prefix} ${emailPlaceholder}`;
30 | } else if (config.is_mobile_basic_authentication_enabled) {
31 | return `${prefix} ${phonePlaceholder}`;
32 | }
33 | return emailPlaceholder;
34 | };
35 |
--------------------------------------------------------------------------------
/src/utils/url.ts:
--------------------------------------------------------------------------------
1 | import { hasWindow } from './window';
2 |
3 | export const getSearchParams = (search = ''): Record => {
4 | let searchPrams = search;
5 | if (!searchPrams && hasWindow()) {
6 | searchPrams = window.location.search;
7 | }
8 | const urlSearchParams = new URLSearchParams(`${searchPrams}`);
9 | // @ts-ignore
10 | const params = Object.fromEntries(urlSearchParams.entries());
11 | return params;
12 | };
13 |
--------------------------------------------------------------------------------
/src/utils/validations.ts:
--------------------------------------------------------------------------------
1 | export const isValidOtp = (otp: string): boolean => {
2 | const re = /^([A-Z0-9]{6})$/;
3 | return re.test(String(otp.trim()));
4 | };
5 |
6 | export const hasSpecialChar = (char: string): boolean => {
7 | const re = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
8 | return re.test(char);
9 | };
10 |
11 | export const validatePassword = (
12 | value: string
13 | ): {
14 | score: number;
15 | strength: string;
16 | hasSixChar: boolean;
17 | hasLowerCase: boolean;
18 | hasUpperCase: boolean;
19 | hasNumericChar: boolean;
20 | hasSpecialChar: boolean;
21 | maxThirtySixChar: boolean;
22 | isValid: boolean;
23 | } => {
24 | const res = {
25 | score: 0,
26 | strength: '',
27 | hasSixChar: false,
28 | hasLowerCase: false,
29 | hasUpperCase: false,
30 | hasNumericChar: false,
31 | hasSpecialChar: false,
32 | maxThirtySixChar: false,
33 | };
34 |
35 | if (value.length >= 6) {
36 | res.score = res.score + 1;
37 | res.hasSixChar = true;
38 | }
39 |
40 | if (value.length > 0 && value.length <= 36) {
41 | res.score = res.score + 1;
42 | res.maxThirtySixChar = true;
43 | }
44 |
45 | Array.from(value).forEach((char: any) => {
46 | if (char >= 'A' && char <= 'Z' && !res.hasUpperCase) {
47 | res.score = res.score + 1;
48 | res.hasUpperCase = true;
49 | } else if (char >= 'a' && char <= 'z' && !res.hasLowerCase) {
50 | res.score = res.score + 1;
51 | res.hasLowerCase = true;
52 | } else if (char >= '0' && char <= '9' && !res.hasNumericChar) {
53 | res.score = res.score + 1;
54 | res.hasNumericChar = true;
55 | } else if (hasSpecialChar(char) && !res.hasSpecialChar) {
56 | res.score = res.score + 1;
57 | res.hasSpecialChar = true;
58 | }
59 | });
60 |
61 | if (res.score <= 2) {
62 | res.strength = 'Weak';
63 | } else if (res.score <= 4) {
64 | res.strength = 'Good';
65 | } else if (res.score <= 5) {
66 | res.strength = 'Strong';
67 | } else {
68 | res.strength = 'Very Strong';
69 | }
70 |
71 | const isValid = Object.values(res).every((i) => Boolean(i));
72 | return { ...res, isValid };
73 | };
74 |
--------------------------------------------------------------------------------
/src/utils/window.ts:
--------------------------------------------------------------------------------
1 | export const hasWindow = (): boolean => typeof window !== 'undefined';
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
3 | "include": ["src", "types", "typings.d.ts", "typings.d.ts"],
4 | "compilerOptions": {
5 | "module": "esnext",
6 | "lib": ["dom", "esnext"],
7 | "importHelpers": true,
8 | // output .d.ts declaration files for consumers
9 | "declaration": true,
10 | // output .js.map sourcemap files for consumers
11 | "sourceMap": true,
12 | // match output dir to input dir. e.g. dist/index instead of dist/src/index
13 | "rootDir": "./src",
14 | // stricter type-checking for stronger correctness. Recommended by TS
15 | "strict": true,
16 | // linter checks for common issues
17 | "noImplicitReturns": true,
18 | "noFallthroughCasesInSwitch": true,
19 | // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
20 | "noUnusedLocals": true,
21 | "noUnusedParameters": true,
22 | // use Node's module resolution algorithm, instead of the legacy TS one
23 | "moduleResolution": "node",
24 | // transpile JSX to React.createElement
25 | "jsx": "react",
26 | // interop between ESM and CJS modules. Recommended by TS
27 | "esModuleInterop": true,
28 | // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
29 | "skipLibCheck": true,
30 | // error out if import and file system have a casing mismatch. Recommended by TS
31 | "forceConsistentCasingInFileNames": true,
32 | // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
33 | "noEmit": true
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/tsdx.config.js:
--------------------------------------------------------------------------------
1 | const replace = require('@rollup/plugin-replace');
2 | const postcss = require('rollup-plugin-postcss');
3 |
4 | module.exports = {
5 | // This function will run for each entry/format/env combination
6 | rollup(config, opts) {
7 | config.plugins = config.plugins.map((p) =>
8 | p.name === 'replace'
9 | ? replace({
10 | 'process.env.NODE_ENV': JSON.stringify(opts.env),
11 | preventAssignment: true,
12 | })
13 | : p
14 | );
15 | config.plugins.push(
16 | postcss({
17 | modules: true,
18 | })
19 | );
20 | return config;
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
17 |