[SDK-1694] Camel case props

EXAMPLES.md

@@ -1,9 +1,9 @@
 # Examples
 
-1. [Protecting a route in a `react-router-dom` app](#1-protecting-a-route-in-a--react-router-dom--app)
+1. [Protecting a route in a `react-router-dom` app](#1-protecting-a-route-in-a-react-router-dom-app)
 2. [Protecting a route in a Gatsby app](#2-protecting-a-route-in-a-gatsby-app)
-3. [Protecting a route in a Next.js app (in SPA mode)](#3-protecting-a-route-in-a-nextjs-app--in-spa-mode-)
-4. [Create a `useApi` hook for accessing protected APIs with an access token.](#4-create-a--useapi--hook-for-accessing-protected-apis-with-an-access-token)
+3. [Protecting a route in a Next.js app (in SPA mode)](#3-protecting-a-route-in-a-nextjs-app-in-spa-mode)
+4. [Create a `useApi` hook for accessing protected APIs with an access token.](#4-create-a-useapi-hook-for-accessing-protected-apis-with-an-access-token)
 
 ## 1. Protecting a route in a `react-router-dom` app
 
@@ -33,8 +33,8 @@ export default function App() {
  return (
  <Auth0Provider
  domain="YOUR_AUTH0_DOMAIN"
- client_id="YOUR_AUTH0_CLIENT_ID"
- redirect_uri={window.location.origin}
+ clientId="YOUR_AUTH0_CLIENT_ID"
+ redirectUri={window.location.origin}
  onRedirectCallback={onRedirectCallback}
  >
  {/* Don't forget to add the history to your router */}
@@ -70,8 +70,8 @@ export const wrapRootElement = ({ element }) => {
  return (
  <Auth0Provider
  domain="YOUR_AUTH0_DOMAIN"
- client_id="YOUR_AUTH0_CLIENT_ID"
- redirect_uri={window.location.origin}
+ clientId="YOUR_AUTH0_CLIENT_ID"
+ redirectUri={window.location.origin}
  onRedirectCallback={onRedirectCallback}
  >
  {element}
@@ -125,8 +125,8 @@ class MyApp extends App {
  return (
  <Auth0Provider
  domain="YOUR_AUTH0_DOMAIN"
- client_id="YOUR_AUTH0_CLIENT_ID"
- redirect_uri={typeof window !== 'undefined' && window.location.origin}
+ clientId="YOUR_AUTH0_CLIENT_ID"
+ redirectUri={typeof window !== 'undefined' && window.location.origin}
  onRedirectCallback={onRedirectCallback}
  >
  <Component {...pageProps} />
@@ -164,20 +164,17 @@ export default withAuthenticationRequired(Profile);
 ```js
 // use-api.js
 import { useEffect, useState } from 'react';
-import { useAuth0 } from '@auth0/auth0-react';
 
 export const useApi = (url, options = {}) => {
- const { isAuthenticated } = useAuth0();
- const [error, setError] = useState(null);
- const [loading, setLoading] = useState(true);
- const [response, setResponse] = useState(true);
+ const { getAccessTokenSilently } = useAuth0();
+ const [state, setState] = useState({
+ error: null,
+ loading: true,
+ data: null,
+ });
+ const [refreshIndex, setRefreshIndex] = useState(0);
 
  useEffect(() => {
- if (!isAuthenticated) {
- setLoading(false);
- setError(new Error('The user is not signed in'));
- return;
- }
  (async () => {
  try {
  const { audience, scope, ...fetchOptions } = options;
@@ -190,19 +187,25 @@ export const useApi = (url, options = {}) => {
  Authorization: `Bearer ${accessToken}`,
  },
  });
- setResponse(await res.json());
+ setState({
+ ...state,
+ data: await res.json(),
+ error: null,
+ loading: false,
+ });
  } catch (error) {
- setError(error);
- } finally {
- setLoading(false);
+ setState({
+ ...state,
+ error,
+ loading: false,
+ });
  }
  })();
- }, []);
+ }, [refreshIndex]);
 
  return {
- loading,
- error,
- response,
+ ...state,
+ refresh: () => setRefreshIndex(refreshIndex + 1),
  };
 };
 ```
@@ -214,17 +217,31 @@ Then use it for accessing protected APIs from your components:
 import { useApi } from './use-api';
 
 export const Profile = () => {
- const { loading, error, response: users } = useApi(
+ const opts = {
+ audience: 'https://api.example.com/',
+ scope: 'read:users',
+ };
+ const { login, getTokenWithPopup } = useAuth0();
+ const { loading, error, refresh, data: users } = useApi(
  'https://api.example.com/users',
- {
- audience: 'https://api.example.com/',
- scope: 'read:users',
- }
+ opts
  );
+ const getTokenAndTryAgain = async () => {
+ await getTokenWithPopup(opts);
+ refresh();
+ };
  if (loading) {
  return <div>Loading...</div>;
  }
  if (error) {
+ if (error.error === 'login_required') {
+ return <button onClick={() => login(opts)}>Login</button>;
+ }
+ if (error.error === 'consent_required') {
+ return (
+ <button onClick={getTokenAndTryAgain}>Consent to reading users</button>
+ );
+ }
  return <div>Oops {error.message}</div>;
  }
  return (

README.md

@@ -50,8 +50,8 @@ import App from './App';
 ReactDOM.render(
  <Auth0Provider
  domain="YOUR_AUTH0_DOMAIN"
- client_id="YOUR_AUTH0_CLIENT_ID"
- redirect_uri={window.location.origin}
+ clientId="YOUR_AUTH0_CLIENT_ID"
+ redirectUri={window.location.origin}
  >
  <App />
  </Auth0Provider>,

__tests__/auth-provider.test.tsx

@@ -20,14 +20,23 @@ describe('Auth0Provider', () => {
 
  it('should configure an instance of the Auth0Client', async () => {
  const opts = {
- client_id: 'foo',
+ clientId: 'foo',
  domain: 'bar',
+ redirectUri: 'baz',
+ maxAge: 'qux',
+ extra_param: '__test_extra_param__',
  };
  const wrapper = createWrapper(opts);
  const { waitForNextUpdate } = renderHook(() => useContext(Auth0Context), {
  wrapper,
  });
- expect(Auth0Client).toHaveBeenCalledWith(opts);
+ expect(Auth0Client).toHaveBeenCalledWith({
+ client_id: 'foo',
+ domain: 'bar',
+ redirect_uri: 'baz',
+ max_age: 'qux',
+ extra_param: '__test_extra_param__',
+ });
  await waitForNextUpdate();
  });
 
@@ -75,7 +84,8 @@ describe('Auth0Provider', () => {
 
  it('should handle other errors when getting token', async () => {
  clientMock.getTokenSilently.mockRejectedValue({
- error_description: '__test_error__',
+ error: '__test_error__',
+ error_description: '__test_error_description__',
  });
  const wrapper = createWrapper();
  const { waitForNextUpdate, result } = renderHook(
@@ -86,7 +96,7 @@ describe('Auth0Provider', () => {
  expect(clientMock.getTokenSilently).toHaveBeenCalled();
  expect(() => {
  throw result.current.error;
- }).toThrowError('__test_error__');
+ }).toThrowError('__test_error_description__');
  expect(result.current.isAuthenticated).toBe(false);
  });
 
@@ -198,7 +208,7 @@ describe('Auth0Provider', () => {
  await waitForNextUpdate();
  expect(result.current.loginWithRedirect).toBeInstanceOf(Function);
  await result.current.loginWithRedirect({
- redirect_uri: '__redirect_uri__',
+ redirectUri: '__redirect_uri__',
  });
  expect(clientMock.loginWithRedirect).toHaveBeenCalledWith({
  redirect_uri: '__redirect_uri__',
@@ -233,6 +243,19 @@ describe('Auth0Provider', () => {
  expect(token).toBe('token');
  });
 
+ it('should normalize errors from getAccessTokenSilently method', async () => {
+ clientMock.getTokenSilently.mockRejectedValue(new ProgressEvent('error'));
+ const wrapper = createWrapper();
+ const { waitForNextUpdate, result } = renderHook(
+ () => useContext(Auth0Context),
+ { wrapper }
+ );
+ await waitForNextUpdate();
+ expect(result.current.getAccessTokenSilently).rejects.toThrowError(
+ 'Get access token failed'
+ );
+ });
+
  it('should provide a getAccessTokenWithPopup method', async () => {
  clientMock.getTokenWithPopup.mockResolvedValue('token');
  const wrapper = createWrapper();
@@ -247,6 +270,19 @@ describe('Auth0Provider', () => {
  expect(token).toBe('token');
  });
 
+ it('should normalize errors from getAccessTokenWithPopup method', async () => {
+ clientMock.getTokenWithPopup.mockRejectedValue(new ProgressEvent('error'));
+ const wrapper = createWrapper();
+ const { waitForNextUpdate, result } = renderHook(
+ () => useContext(Auth0Context),
+ { wrapper }
+ );
+ await waitForNextUpdate();
+ expect(result.current.getAccessTokenWithPopup).rejects.toThrowError(
+ 'Get access token failed'
+ );
+ });
+
  it('should provide a getIdTokenClaims method', async () => {
  clientMock.getIdTokenClaims.mockResolvedValue({
  claim: '__test_claim__',

__tests__/helpers.tsx

@@ -3,13 +3,13 @@ import React, { PropsWithChildren } from 'react';
 import Auth0Provider from '../src/auth0-provider';
 
 export const createWrapper = ({
- client_id = '__test_client_id__',
+ clientId = '__test_client_id__',
  domain = '__test_domain__',
  ...opts
 }: Partial<Auth0ClientOptions> = {}) => ({
  children,
 }: PropsWithChildren<{}>): JSX.Element => (
- <Auth0Provider domain={domain} client_id={client_id} {...opts}>
+ <Auth0Provider domain={domain} clientId={clientId} {...opts}>
  {children}
  </Auth0Provider>
 );

__tests__/utils.test.tsx

@@ -2,6 +2,8 @@ import {
  defaultOnRedirectCallback,
  hasAuthParams,
  loginError,
+ OAuthError,
+ tokenError,
 } from '../src/utils';
 
 describe('utils hasAuthParams', () => {
@@ -52,17 +54,20 @@ describe('utils defaultOnRedirectCallback', () => {
  });
 });
 
-describe('utils loginError', () => {
+describe('utils error', () => {
  it('should return the original error', async () => {
  const error = new Error('__test_error__');
  expect(loginError(error)).toBe(error);
  });
 
- it('should convert an OAuth error to a JS error', async () => {
- const error = { error_description: '__test_error__' };
+ it('should convert OAuth error data to an OAuth JS error', async () => {
+ const error = {
+ error: '__test_error__',
+ error_description: '__test_error_description__',
+ };
  expect(() => {
- throw loginError(error);
- }).toThrowError('__test_error__');
+ throw tokenError(error);
+ }).toThrow(OAuthError);
  });
 
  it('should convert a ProgressEvent error to a JS error', async () => {
@@ -71,4 +76,20 @@ describe('utils loginError', () => {
  throw loginError(error);
  }).toThrowError('Login failed');
  });
+
+ it('should produce an OAuth JS error with error_description properties', async () => {
+ const error = new OAuthError(
+ '__test_error__',
+ '__test_error_description__'
+ );
+ expect(error.error).toBe('__test_error__');
+ expect(error.error_description).toBe('__test_error_description__');
+ expect(error.message).toBe('__test_error_description__');
+ });
+
+ it('should produce an OAuth JS error with error properties', async () => {
+ const error = new OAuthError('__test_error__');
+ expect(error.error).toBe('__test_error__');
+ expect(error.message).toBe('__test_error__');
+ });
 });

__tests__/withLoginRequired.test.tsx

@@ -4,7 +4,7 @@ import withAuthenticationRequired from '../src/with-login-required';
 import { render, screen, waitFor } from '@testing-library/react';
 import { Auth0Client } from '@auth0/auth0-spa-js';
 import Auth0Provider from '../src/auth0-provider';
-import { mocked } from 'ts-jest';
+import { mocked } from 'ts-jest/utils';
 
 const mockClient = mocked(new Auth0Client({ client_id: '', domain: '' }));
 
@@ -13,7 +13,7 @@ describe('withAuthenticationRequired', () => {
  const MyComponent = (): JSX.Element => <>Private</>;
  const WrappedComponent = withAuthenticationRequired(MyComponent);
  render(
- <Auth0Provider client_id="__test_client_id__" domain="__test_domain__">
+ <Auth0Provider clientId="__test_client_id__" domain="__test_domain__">
  <WrappedComponent />
  </Auth0Provider>
  );
@@ -28,7 +28,7 @@ describe('withAuthenticationRequired', () => {
  const MyComponent = (): JSX.Element => <>Private</>;
  const WrappedComponent = withAuthenticationRequired(MyComponent);
  render(
- <Auth0Provider client_id="__test_client_id__" domain="__test_domain__">
+ <Auth0Provider clientId="__test_client_id__" domain="__test_domain__">
  <WrappedComponent />
  </Auth0Provider>
  );
@@ -47,7 +47,7 @@ describe('withAuthenticationRequired', () => {
  OnRedirecting
  );
  render(
- <Auth0Provider client_id="__test_client_id__" domain="__test_domain__">
+ <Auth0Provider clientId="__test_client_id__" domain="__test_domain__">
  <WrappedComponent />
  </Auth0Provider>
  );

jest.config.js

@@ -9,6 +9,13 @@ module.exports = {
  ],
  testURL: 'https://www.example.com/',
  testRegex: '/__tests__/.+test.tsx?$',
+ globals: {
+ 'ts-jest': {
+ tsConfig: {
+ target: 'es6',
+ },
+ },
+ },
  coverageThreshold: {
  global: {
  branches: 100,