180 |
176 |
180 |
Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout Why Auth0?
183 |184 | This project is licensed under the MIT license. See the LICENSE file for more info.
185 | -------------------------------------------------------------------------------- /TROUBLESHOOTING.md: -------------------------------------------------------------------------------- 1 | # Troubleshooting 2 | 3 | When your application is not behaving as expected: 4 | 5 | - Check for any messages in the console 6 | - Check the Network Activity especially any requests to your authorization server 7 | - Check the log data in your [Auth0 Dashboard](https://manage.auth0.com#/logs) 8 | - Check the `@auth0/auth0-spa-js` [FAQs](https://github.com/auth0/auth0-spa-js/blob/main/FAQ.md) 9 | 10 | If you believe there is a bug in the SDK, [raise an issue](https://github.com/auth0/auth0-spa-js/issues/new/choose). Be sure to include all the information required to reproduce the issue. 11 | -------------------------------------------------------------------------------- /__mocks__/@auth0/auth0-spa-js.tsx: -------------------------------------------------------------------------------- 1 | const handleRedirectCallback = jest.fn(() => ({ appState: {} })); 2 | const buildLogoutUrl = jest.fn(); 3 | const buildAuthorizeUrl = jest.fn(); 4 | const checkSession = jest.fn(); 5 | const getTokenSilently = jest.fn(); 6 | const getTokenWithPopup = jest.fn(); 7 | const getUser = jest.fn(); 8 | const getIdTokenClaims = jest.fn(); 9 | const isAuthenticated = jest.fn(() => false); 10 | const loginWithPopup = jest.fn(); 11 | const loginWithRedirect = jest.fn(); 12 | const logout = jest.fn(); 13 | 14 | export const Auth0Client = jest.fn(() => { 15 | return { 16 | buildAuthorizeUrl, 17 | buildLogoutUrl, 18 | checkSession, 19 | handleRedirectCallback, 20 | getTokenSilently, 21 | getTokenWithPopup, 22 | getUser, 23 | getIdTokenClaims, 24 | isAuthenticated, 25 | loginWithPopup, 26 | loginWithRedirect, 27 | logout, 28 | }; 29 | }); 30 | -------------------------------------------------------------------------------- /__tests__/auth-reducer.test.tsx: -------------------------------------------------------------------------------- 1 | import { reducer } from '../src/reducer'; 2 | import { initialAuthState } from '../src/auth-state'; 3 | 4 | describe('reducer', () => { 5 | it('should initialise when authenticated', async () => { 6 | const payload = { 7 | isAuthenticated: true, 8 | user: { name: 'Bob' }, 9 | }; 10 | expect( 11 | reducer(initialAuthState, { type: 'INITIALISED', ...payload }) 12 | ).toEqual({ 13 | ...initialAuthState, 14 | isLoading: false, 15 | ...payload, 16 | }); 17 | }); 18 | 19 | it('should initialise when not authenticated', async () => { 20 | const payload = { 21 | isAuthenticated: false, 22 | }; 23 | expect( 24 | reducer(initialAuthState, { type: 'INITIALISED', ...payload }) 25 | ).toEqual({ 26 | ...initialAuthState, 27 | isLoading: false, 28 | ...payload, 29 | }); 30 | }); 31 | 32 | it('should handle error state', async () => { 33 | const payload = { 34 | error: new Error('__test_error__'), 35 | }; 36 | expect(reducer(initialAuthState, { type: 'ERROR', ...payload })).toEqual({ 37 | ...initialAuthState, 38 | isLoading: false, 39 | ...payload, 40 | }); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /__tests__/errors.test.tsx: -------------------------------------------------------------------------------- 1 | import { OAuthError } from '../src'; 2 | 3 | describe('OAuthError', () => { 4 | it('should produce an OAuth JS error with error_description properties', async () => { 5 | const error = new OAuthError( 6 | '__test_error__', 7 | '__test_error_description__' 8 | ); 9 | expect(error.error).toBe('__test_error__'); 10 | expect(error.error_description).toBe('__test_error_description__'); 11 | expect(error.message).toBe('__test_error_description__'); 12 | }); 13 | 14 | it('should produce an OAuth JS error with error properties', async () => { 15 | const error = new OAuthError('__test_error__'); 16 | expect(error.error).toBe('__test_error__'); 17 | expect(error.message).toBe('__test_error__'); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /__tests__/helpers.tsx: -------------------------------------------------------------------------------- 1 | import React, { PropsWithChildren } from 'react'; 2 | import Auth0Provider, { Auth0ProviderOptions } from '../src/auth0-provider'; 3 | 4 | export const createWrapper = ({ 5 | clientId = '__test_client_id__', 6 | domain = '__test_domain__', 7 | ...opts 8 | }: Partialconst MyProtectedComponent = withAuthenticationRequired(MyComponent);
2 | When you wrap your components in this Higher Order Component and an anonymous user visits your component 4 | they will be redirected to the login page; after login they will be returned to the page they were redirected from.
5 |Optional popupAccepts an already-created popup window to use. If not specified, the SDK 4 | will create its own. This may be useful for platforms like iOS that have 5 | security restrictions around when popups can be invoked (e.g. from a user click event)
6 |Optional timeoutThe number of seconds to wait for a popup response before 7 | throwing a timeout error. Defaults to 60s
8 |Optional authorizationURL parameters that will be sent back to the Authorization Server. This can be known parameters 3 | defined by Auth0 or custom parameters that you define.
4 |Components wrapped in withAuth0 will have an additional auth0 prop
The state of the application before the user was redirected to the login page.
2 |Optional returnThe possible locations where tokens can be stored
2 || Name | 31 ||
|---|---|
| {name} | 39 |{email} | 40 |
| Name | 31 ||
|---|---|
| {name} | 38 |{email} | 39 |
| Name | 32 ||
|---|---|
| {name} | 39 |{email} | 40 |
( 30 | Component: ComponentType
,
31 | context = Auth0Context
32 | ): ComponentType (
98 | Component: ComponentType ,
99 | options: WithAuthenticationRequiredOptions = {}
100 | ): FC => {
101 | return function WithAuthenticationRequired(props: P): React.JSX.Element {
102 | const {
103 | returnTo = defaultReturnTo,
104 | onRedirecting = defaultOnRedirecting,
105 | onBeforeAuthentication = defaultOnBeforeAuthentication,
106 | loginOptions,
107 | context = Auth0Context,
108 | } = options;
109 |
110 | const { isAuthenticated, isLoading, loginWithRedirect } =
111 | useAuth0(context);
112 |
113 | useEffect(() => {
114 | if (isLoading || isAuthenticated) {
115 | return;
116 | }
117 | const opts = {
118 | ...loginOptions,
119 | appState: {
120 | ...(loginOptions && loginOptions.appState),
121 | returnTo: typeof returnTo === 'function' ? returnTo() : returnTo,
122 | },
123 | };
124 | (async (): PromiseRedirecting you to the login...
50 | * })
51 | * ```
52 | *
53 | * Render a message to show that the user is being redirected to the login.
54 | */
55 | onRedirecting?: () => React.JSX.Element;
56 | /**
57 | * ```js
58 | * withAuthenticationRequired(Profile, {
59 | * onBeforeAuthentication: () => { analyticsLibrary.track('login_triggered'); }
60 | * })
61 | * ```
62 | *
63 | * Allows executing logic before the user is redirected to the login page.
64 | */
65 | onBeforeAuthentication?: () => Promise
Provides the Auth0Context to its child components.
4 |