diff --git a/CHANGELOG.md b/CHANGELOG.md index 32c2f4d1..810e9bfb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## [v2.0.1](https://github.com/auth0/auth0-react/tree/v2.0.1) (2023-02-22) +[Full Changelog](https://github.com/auth0/auth0-react/compare/v2.0.0...v2.0.1) + +**Fixed** +- Support redirectUri again in a deprecated way [\#507](https://github.com/auth0/auth0-react/pull/507) ([frederikprijck](https://github.com/frederikprijck)) + ## [v2.0.0](https://github.com/auth0/auth0-react/tree/v2.0.0) (2023-01-19) Auth0-React v2 includes many significant changes compared to v1: diff --git a/docs/assets/highlight.css b/docs/assets/highlight.css index 61f638bb..fe8e48ac 100644 --- a/docs/assets/highlight.css +++ b/docs/assets/highlight.css @@ -9,24 +9,26 @@ --dark-hl-3: #C586C0; --light-hl-4: #001080; --dark-hl-4: #9CDCFE; - --light-hl-5: #795E26; - --dark-hl-5: #DCDCAA; - --light-hl-6: #800000; - --dark-hl-6: #808080; - --light-hl-7: #267F99; - --dark-hl-7: #4EC9B0; - --light-hl-8: #E50000; - --dark-hl-8: #9CDCFE; - --light-hl-9: #0000FF; - --dark-hl-9: #569CD6; - --light-hl-10: #000000FF; - --dark-hl-10: #D4D4D4; - --light-hl-11: #0070C1; - --dark-hl-11: #4FC1FF; + --light-hl-5: #0000FF; + --dark-hl-5: #569CD6; + --light-hl-6: #0070C1; + --dark-hl-6: #4FC1FF; + --light-hl-7: #795E26; + --dark-hl-7: #DCDCAA; + --light-hl-8: #800000; + --dark-hl-8: #808080; + --light-hl-9: #267F99; + --dark-hl-9: #4EC9B0; + --light-hl-10: #E50000; + --dark-hl-10: #9CDCFE; + --light-hl-11: #000000FF; + --dark-hl-11: #D4D4D4; --light-hl-12: #800000; --dark-hl-12: #569CD6; --light-hl-13: #098658; --dark-hl-13: #B5CEA8; + --light-hl-14: #CD3131; + --dark-hl-14: #F44747; --light-code-background: #FFFFFF; --dark-code-background: #1E1E1E; } @@ -46,6 +48,7 @@ --hl-11: var(--light-hl-11); --hl-12: var(--light-hl-12); --hl-13: var(--light-hl-13); + --hl-14: var(--light-hl-14); --code-background: var(--light-code-background); } } @@ -64,6 +67,7 @@ --hl-11: var(--dark-hl-11); --hl-12: var(--dark-hl-12); --hl-13: var(--dark-hl-13); + --hl-14: var(--dark-hl-14); --code-background: var(--dark-code-background); } } @@ -82,6 +86,7 @@ --hl-11: var(--light-hl-11); --hl-12: var(--light-hl-12); --hl-13: var(--light-hl-13); + --hl-14: var(--light-hl-14); --code-background: var(--light-code-background); } @@ -100,6 +105,7 @@ --hl-11: var(--dark-hl-11); --hl-12: var(--dark-hl-12); --hl-13: var(--dark-hl-13); + --hl-14: var(--dark-hl-14); --code-background: var(--dark-code-background); } @@ -117,4 +123,5 @@ .hl-11 { color: var(--hl-11); } .hl-12 { color: var(--hl-12); } .hl-13 { color: var(--hl-13); } +.hl-14 { color: var(--hl-14); } pre, code { background: var(--code-background); } diff --git a/docs/classes/OAuthError.html b/docs/classes/OAuthError.html index 50392885..19d2f305 100644 --- a/docs/classes/OAuthError.html +++ b/docs/classes/OAuthError.html @@ -27,7 +27,7 @@

Hierarchy

+
  • Defined in src/errors.tsx:7
    • @@ -68,19 +68,19 @@
    Optional error_description: Returns OAuthError
    +
  • Defined in src/errors.tsx:8

    • Properties

    error

    error: string
    +
  • Defined in src/errors.tsx:8

    • Optional error_description

    error_description?: string
    +
  • Defined in src/errors.tsx:8

    • message

    message: string
    +
  • Defined in src/auth0-provider.tsx:135
    • diff --git a/docs/functions/useAuth0.html b/docs/functions/useAuth0.html index 894eba68..00a090c8 100644 --- a/docs/functions/useAuth0.html +++ b/docs/functions/useAuth0.html @@ -19,7 +19,7 @@

    Function useAuth0

    Returns Auth0ContextInterface<TUser>

    +
  • Defined in src/use-auth0.tsx:27
    • diff --git a/docs/functions/withAuth0.html b/docs/functions/withAuth0.html index a3cbec03..89b0ceb2 100644 --- a/docs/functions/withAuth0.html +++ b/docs/functions/withAuth0.html @@ -19,7 +19,7 @@

    Function withAuth0

    • -
      class MyComponent extends Component {
        render() {
          // Access the auth context from the `auth0` prop
          const { user } = this.props.auth0;
          return <div>Hello {user.name}!</div>
        }
      }
      // Wrap your class component in withAuth0
      export default withAuth0(MyComponent);
+
      class MyComponent extends Component {
        render() {
          // Access the auth context from the `auth0` prop
          const { user } = this.props.auth0;
          return <div>Hello {user.name}!</div>
        }
      }
      // Wrap your class component in withAuth0
      export default withAuth0(MyComponent);
 
      
 
      Wrap your class components in this Higher Order Component to give them access to the Auth0Context.
      
 
      Providing a context as the second argument allows you to configure the Auth0Provider the Auth0Context
@@ -39,7 +39,7 @@ 
      Component: ComponentTypecontext: Context<Auth0ContextInterface<User>> = Auth0Context

    Returns ComponentType<Omit<P, "auth0">>

    +
  • Defined in src/with-auth0.tsx:29
    • diff --git a/docs/functions/withAuthenticationRequired.html b/docs/functions/withAuthenticationRequired.html index e6239f6d..c71bca26 100644 --- a/docs/functions/withAuthenticationRequired.html +++ b/docs/functions/withAuthenticationRequired.html @@ -19,7 +19,7 @@

    Function withAuthenticationRequired

    • -
      const MyProtectedComponent = withAuthenticationRequired(MyComponent);
+
      const MyProtectedComponent = withAuthenticationRequired(MyComponent);
 
      
 
      When you wrap your components in this Higher Order Component and an anonymous user visits your component
 they will be redirected to the login page and returned to the page they we're redirected from after login.
      
@@ -38,7 +38,7 @@ 
      Component: ComponentTypeoptions: WithAuthenticationRequiredOptions = {}

    Returns FC<P>

    +
  • Defined in src/with-authentication-required.tsx:82
    • diff --git a/docs/index.html b/docs/index.html index ab4c1377..412731f2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -74,10 +74,18 @@

    Configure Auth0

    Configure the SDK

    Configure the SDK by wrapping your application in Auth0Provider:

    -
    // src/index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Auth0Provider } from '@auth0/auth0-react';
    import App from './App';

    ReactDOM.render(
      <Auth0Provider
        domain="YOUR_AUTH0_DOMAIN"
        clientId="YOUR_AUTH0_CLIENT_ID"
        authorizationParams={{
          redirect_uri: window.location.origin,
        }}
      >
        <App />
      </Auth0Provider>,
      document.getElementById('app')
    );
+
    // src/index.js
    import React from 'react';
    import { createRoot } from 'react-dom/client';
    import { Auth0Provider } from '@auth0/auth0-react';
    import App from './App';

    const root = createRoot(document.getElementById('app'));

    root.render(
      <Auth0Provider
        domain="YOUR_AUTH0_DOMAIN"
        clientId="YOUR_AUTH0_CLIENT_ID"
        authorizationParams={{
          redirect_uri: window.location.origin,
        }}
      >
        <App />
      </Auth0Provider>
    );
 
    
+
    
+Instructions for React <18
+
    
+
+
    // src/index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Auth0Provider } from '@auth0/auth0-react';
    import App from './App';

    ReactDOM.render(
      <Auth0Provider
        domain="YOUR_AUTH0_DOMAIN"
        clientId="YOUR_AUTH0_CLIENT_ID"
        authorizationParams={{
          redirect_uri: window.location.origin,
        }}
      >
        <App />
      </Auth0Provider>,
      document.getElementById('app')
    );
+
    
+
    
+
 
    Use the useAuth0 hook in your components to access authentication state (isLoading, isAuthenticated and user) and authentication methods (loginWithRedirect and logout):
    
-
    // src/App.js
    import React from 'react';
    import { useAuth0 } from '@auth0/auth0-react';

    function App() {
      const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } =
        useAuth0();

      if (isLoading) {
        return <div>Loading...</div>;
      }
      if (error) {
        return <div>Oops... {error.message}</div>;
      }

      if (isAuthenticated) {
        return (
          <div>
            Hello {user.name}{' '}
            <button onClick={() => logout({ returnTo: window.location.origin })}>
              Log out
            </button>
          </div>
        );
      } else {
        return <button onClick={loginWithRedirect}>Log in</button>;
      }
    }

    export default App;
+
    // src/App.js
    import React from 'react';
    import { useAuth0 } from '@auth0/auth0-react';

    function App() {
      const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } =
        useAuth0();

      if (isLoading) {
        return <div>Loading...</div>;
      }
      if (error) {
        return <div>Oops... {error.message}</div>;
      }

      if (isAuthenticated) {
        return (
          <div>
            Hello {user.name}{' '}
            <button onClick={() => logout({ returnTo: window.location.origin })}>
              Log out
            </button>
          </div>
        );
      } else {
        return <button onClick={() => loginWithRedirect()}>Log in</button>;
      }
    }

    export default App;
 
    
 
    For more code samples on how to integrate auth0-react SDK in your React application, have a look at our examples.
    
 
@@ -86,11 +94,11 @@ 
    API reference
    
 
 
    Explore public API's available in auth0-react.
    
 
 
 
diff --git a/docs/interfaces/Auth0ContextInterface.html b/docs/interfaces/Auth0ContextInterface.html
index 6e42ab17..1ebefbce 100644
--- a/docs/interfaces/Auth0ContextInterface.html
+++ b/docs/interfaces/Auth0ContextInterface.html
@@ -30,7 +30,7 @@ 
    Hierarchy
    
 
      
 
    • Auth0ContextInterface
    
+
  • Defined in src/auth0-context.tsx:26
    • 
 
    
 
    
 
    
@@ -57,7 +57,7 @@ 
    Optionalerror?: Error
    +
  • Defined in src/auth-state.tsx:7

    • getAccessTokenSilently

    getAccessTokenSilently: {
        (options: GetTokenSilentlyOptions & {
            detailedResponse: true;
        }): Promise<GetTokenSilentlyVerboseResponse>;
        (options?: GetTokenSilentlyOptions): Promise<string>;
        (options: GetTokenSilentlyOptions): Promise<string | GetTokenSilentlyVerboseResponse>;
    }
    @@ -68,7 +68,7 @@

    Type declaration

    • (options: GetTokenSilentlyOptions & {
          detailedResponse: true;
      }): Promise<GetTokenSilentlyVerboseResponse>
    • -
      const token = await getAccessTokenSilently(options);
+
      const token = await getAccessTokenSilently(options);
 
      
 
      If there's a valid token stored, return it. Otherwise, opens an
 iframe with the /authorize URL using the parameters provided
@@ -93,7 +93,7 @@ 
      options: Returns Promise<GetTokenSilentlyVerboseResponse>
    • (options?: GetTokenSilentlyOptions): Promise<string>
    • -
      const token = await getAccessTokenSilently(options);
+
      const token = await getAccessTokenSilently(options);
 
      
 
      If there's a valid token stored, return it. Otherwise, opens an
 iframe with the /authorize URL using the parameters provided
@@ -118,7 +118,7 @@ 
      Optional options: Returns Promise<string>
    • (options: GetTokenSilentlyOptions): Promise<string | GetTokenSilentlyVerboseResponse>
    • -
      const token = await getAccessTokenSilently(options);
+
      const token = await getAccessTokenSilently(options);
 
      
 
      If there's a valid token stored, return it. Otherwise, opens an
 iframe with the /authorize URL using the parameters provided
@@ -142,7 +142,7 @@ 
      Parameters
      
 
      options: GetTokenSilentlyOptions

    Returns Promise<string | GetTokenSilentlyVerboseResponse>

    +
  • Defined in src/auth0-context.tsx:52

    • getAccessTokenWithPopup

    getAccessTokenWithPopup: ((options?: GetTokenWithPopupOptions, config?: PopupConfigOptions) => Promise<undefined | string>)
    @@ -153,7 +153,7 @@

    Type declaration

    Returns Promise<undefined | string>

    +
  • Defined in src/auth0-context.tsx:74

    • getIdTokenClaims

    getIdTokenClaims: (() => Promise<undefined | IdToken>)
    @@ -181,13 +181,13 @@

    Type declaration

    • (): Promise<undefined | IdToken>
    • -
      const claims = await getIdTokenClaims();
+
      const claims = await getIdTokenClaims();
 
      
 
      Returns all claims from the id_token if available.
      
 
      
 
      Returns Promise<undefined | IdToken>
    +
  • Defined in src/auth0-context.tsx:86

    • handleRedirectCallback

    handleRedirectCallback: ((url?: string) => Promise<RedirectLoginResult<any>>)
    @@ -212,19 +212,19 @@
    Optional url: Returns Promise<RedirectLoginResult<any>>
    +
  • Defined in src/auth0-context.tsx:140

    • isAuthenticated

    isAuthenticated: boolean
    +
  • Defined in src/auth-state.tsx:8

    • isLoading

    isLoading: boolean
    +
  • Defined in src/auth-state.tsx:9

    • loginWithPopup

    loginWithPopup: ((options?: PopupLoginOptions, config?: PopupConfigOptions) => Promise<void>)
    @@ -235,7 +235,7 @@

    Type declaration

    Returns Promise<void>

    +
  • Defined in src/auth0-context.tsx:115

    • loginWithRedirect

    loginWithRedirect: ((options?: RedirectLoginOptions<AppState>) => Promise<void>)
    @@ -265,7 +265,7 @@

    Type declaration

    • (options?: RedirectLoginOptions<AppState>): Promise<void>
    • -
      await loginWithRedirect(options);
+
      await loginWithRedirect(options);
 
      
 
      Performs a redirect to /authorize using the parameters
 provided as arguments. Random and secure state and nonce
@@ -278,7 +278,7 @@ 
      Parameters
      
 
      Optional options: RedirectLoginOptions<AppState>

    Returns Promise<void>

    +
  • Defined in src/auth0-context.tsx:97

    • logout

    logout: ((options?: LogoutOptions) => void)
    @@ -289,7 +289,7 @@

    Type declaration

    • (options?: LogoutOptions): void
    • -
      auth0.logout({ returnTo: window.location.origin });
+
      auth0.logout({ returnTo: window.location.origin });
 
      
 
      Clears the application session and performs a redirect to /v2/logout, using
 the parameters provided as arguments, to clear the Auth0 session.
@@ -303,13 +303,13 @@ 
      Parameters
      
 
      Optional options: LogoutOptions

    Returns void

    +
  • Defined in src/auth0-context.tsx:130

    • Optional user

    user?: TUser
    +
  • Defined in src/auth-state.tsx:10
    • diff --git a/docs/interfaces/Auth0ProviderOptions.html b/docs/interfaces/Auth0ProviderOptions.html index 48de911f..9f7dcda1 100644 --- a/docs/interfaces/Auth0ProviderOptions.html +++ b/docs/interfaces/Auth0ProviderOptions.html @@ -25,7 +25,7 @@

    Hierarchy

    • Auth0ProviderOptions
    +
  • Defined in src/auth0-provider.tsx:44
    • @@ -120,7 +120,7 @@

    Optional

    The child nodes your Provider has wrapped

    +
  • Defined in src/auth0-provider.tsx:48

    • clientId

    clientId: string
    @@ -147,7 +147,7 @@

    OptionalFor a sample on using multiple Auth0Providers review the React Account Linking Sample

    +
  • Defined in src/auth0-provider.tsx:86

    • Optional cookieDomain

    cookieDomain?: string
    @@ -250,7 +250,7 @@
    Optional appState: Optional user: User

    Returns void

    +
  • Defined in src/auth0-provider.tsx:54

    • Optional sessionCheckExpiryDays

    sessionCheckExpiryDays?: number
    @@ -266,11 +266,11 @@

    Optional

    By default, if the page url has code/state params, the SDK will treat them as Auth0's and attempt to exchange the code for a token. In some cases the code might be for something else (another OAuth SDK perhaps). In these instances you can instruct the client to ignore them eg

    -
    <Auth0Provider
      clientId={clientId}
      domain={domain}
      skipRedirectCallback={window.location.pathname === '/stripe-oauth-callback'}
    >
+
    <Auth0Provider
      clientId={clientId}
      domain={domain}
      skipRedirectCallback={window.location.pathname === '/stripe-oauth-callback'}
    >

    +
  • Defined in src/auth0-provider.tsx:68

    • Optional useCookiesForTransactions

    useCookiesForTransactions?: boolean
    @@ -314,7 +314,7 @@

    Optionalrefresh_token grant and prompt the user to login interactively with loginWithRedirect or loginWithPopup."

    E.g. Using the file: protocol in an Electron application does not support that legacy technique.

    -

    Example

    let token: string;
    try {
      token = await auth0.getTokenSilently();
    } catch (e) {
      if (e.error === 'missing_refresh_token' || e.error === 'invalid_grant') {
        auth0.loginWithRedirect();
      }
    }
+
    Example
    let token: string;
    try {
      token = await auth0.getTokenSilently();
    } catch (e) {
      if (e.error === 'missing_refresh_token' || e.error === 'invalid_grant') {
        auth0.loginWithRedirect();
      }
    }
    +
  • Defined in src/auth0-context.tsx:18
    • @@ -38,7 +38,7 @@

    Properties

    Properties

    Optional clientId

    -
    clientId?: string
    +
    clientId?: null | string

    The clientId of your application.

    If this property is not set, then the clientId that was used during initialization of the SDK is sent to the logout endpoint.

    If this property is set to null, then no client ID value is sent to the logout endpoint.

    @@ -85,7 +85,7 @@

    Optional

    Used to control the redirect and not rely on the SDK to do the actual redirect.

    Set to false to disable the redirect, or provide a function to handle the actual redirect yourself.

    -

    Example

    await auth0.logout({
      async openUrl(url) {
        window.location.replace(url);
      }
    });
+
    Example
    await auth0.logout({
      async openUrl(url) {
        window.location.replace(url);
      }
    });
    @@ -79,7 +79,7 @@

    Type declaration

  • Used to control the redirect and not rely on the SDK to do the actual redirect.

    -

    Example

    const client = new Auth0Client({
      async openUrl(url) {
        window.location.replace(url);
      }
    });
+
    Example
    const client = new Auth0Client({
      async openUrl(url) {
        window.location.replace(url);
      }
    });
    diff --git a/docs/interfaces/WithAuth0Props.html b/docs/interfaces/WithAuth0Props.html index 9c9e1366..34ae2cab 100644 --- a/docs/interfaces/WithAuth0Props.html +++ b/docs/interfaces/WithAuth0Props.html @@ -23,7 +23,7 @@

    Hierarchy

    • WithAuth0Props
    • +
  • Defined in src/with-auth0.tsx:7
    • @@ -39,7 +39,7 @@

    Properties

    auth0

    auth0: Auth0ContextInterface<User>
    +
  • Defined in src/with-auth0.tsx:8
    • diff --git a/docs/interfaces/WithAuthenticationRequiredOptions.html b/docs/interfaces/WithAuthenticationRequiredOptions.html index 654c00d0..ba4d26ca 100644 --- a/docs/interfaces/WithAuthenticationRequiredOptions.html +++ b/docs/interfaces/WithAuthenticationRequiredOptions.html @@ -23,7 +23,7 @@

    Hierarchy

    • WithAuthenticationRequiredOptions
    +
  • Defined in src/with-authentication-required.tsx:22
    • @@ -46,17 +46,17 @@

    Optional

    +
  • Defined in src/with-authentication-required.tsx:71

    • Optional loginOptions

    loginOptions?: RedirectLoginOptions<AppState>
    -
    withAuthenticationRequired(Profile, {
      loginOptions: {
        appState: {
          customProp: 'foo'
        }
      }
    })
+
    withAuthenticationRequired(Profile, {
      loginOptions: {
        appState: {
          customProp: 'foo'
        }
      }
    })
 
    
 
    Pass additional login options, like extra appState to the login page.
 This will be merged with the returnTo option used by the onRedirectCallback handler.
    +
  • Defined in src/with-authentication-required.tsx:65

    • Optional onRedirecting

    onRedirecting?: (() => Element)
    @@ -67,25 +67,25 @@

    Type declaration

    • (): Element
    • -
      withAuthenticationRequired(Profile, {
        onRedirecting: () => <div>Redirecting you to the login...</div>
      })
+
      withAuthenticationRequired(Profile, {
        onRedirecting: () => <div>Redirecting you to the login...</div>
      })
 
      
 
      Render a message to show that the user is being redirected to the login.
      
 
      
 
      Returns Element
    +
  • Defined in src/with-authentication-required.tsx:50

    • Optional returnTo

    returnTo?: string | (() => string)
    -
    withAuthenticationRequired(Profile, {
      returnTo: '/profile'
    })
+
    withAuthenticationRequired(Profile, {
      returnTo: '/profile'
    })
 
    
 
    or
    
-
    withAuthenticationRequired(Profile, {
      returnTo: () => window.location.hash.substr(1)
    })
+
    withAuthenticationRequired(Profile, {
      returnTo: () => window.location.hash.substr(1)
    })
 
    
 
    Add a path for the onRedirectCallback handler to return the user to after login.
    +
  • Defined in src/with-authentication-required.tsx:40
    • diff --git a/docs/types/AppState.html b/docs/types/AppState.html index e8dde5c0..0174f19a 100644 --- a/docs/types/AppState.html +++ b/docs/types/AppState.html @@ -26,7 +26,7 @@
    [key:
    Optional returnTo?: string
    +
  • Defined in src/auth0-provider.tsx:36
    • diff --git a/docs/variables/Auth0Context.html b/docs/variables/Auth0Context.html index f19f4aa8..58426fe3 100644 --- a/docs/variables/Auth0Context.html +++ b/docs/variables/Auth0Context.html @@ -19,7 +19,7 @@

    Variable Auth0ContextConst

    The Auth0 Context

    +
  • Defined in src/auth0-context.tsx:169
    • diff --git a/package-lock.json b/package-lock.json index 5144ea87..022b457e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@auth0/auth0-react", - "version": "2.0.0", + "version": "2.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@auth0/auth0-react", - "version": "2.0.0", + "version": "2.0.1", "license": "MIT", "dependencies": { "@auth0/auth0-spa-js": "^2.0.4" diff --git a/package.json b/package.json index f32946fc..b04c2685 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "author": "Auth0", "name": "@auth0/auth0-react", - "version": "2.0.0", + "version": "2.0.1", "description": "Auth0 SDK for React Single Page Applications (SPA)", "keywords": [ "auth0",