Upgrade from pre-1.0.0

We tried to keep useAuth backwards compatible and ran into fundamental issues with module imports.

Upgrading takes 5min or less! You can keep your existing config and most of the code! 2 small changes is all it takes.

1. Install packages

Start by installing the latest package:

$ yarn add react-use-auth

You'll need the auth0-js client because it's now a peer dependency.

$ yarn add auth0-js

If you prefer npm, that works too :)

2. Update your auth0_callback page

const { handleAuthentication } = useAuth();
useEffect(() => {
    handleAuthentication();
}, []);

becomes

const { handleAuthentication } = useAuth();
useEffect(() => {
    handleAuthentication();
}, [handleAuthentication]);

This ensures handleAuthentication runs after XState is initialized. You'll run into race conditions otherwise and users might get stuck.

3. AuthProvider 👉 AuthConfig

<AuthProvider> is now deprecated in favor of <AuthConfig>. Using auth provider will print an error and authentication won't work. But we made sure your site doesn't otherwise break :)

export const wrapRootElement = ({ element }) => (
    <AuthProvider
        navigate={navigate}
        auth0_domain="useauth.auth0.com"
        auth0_client_id="GjWNFNOHq1ino7lQNJBwEywa1aYtbIzh"
    >
        {element}
    </AuthProvider>
);

becomes

import { AuthConfig } from "react-use-auth";
import { Auth0 } from "react-use-auth/auth0";
export const wrapRootElement = ({ element }) => (
    <AuthConfig
        navigate={navigate}
        authProvider={Auth0}
        params={{
            domain: "useauth.auth0.com",
            clientID: "GjWNFNOHq1ino7lQNJBwEywa1aYtbIzh"
        }}
    >
        {element}
    </AuthConfig>
);

For a full list of options go to Use with Auth0.