# Upgrade from pre-1.0.0

We tried to keep [`useAuth`](https://useauth.dev) backwards compatible and ran into [fundamental issues with module imports](https://github.com/Swizec/useAuth/issues/129).

**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

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

becomes

```javascript
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 :)

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

becomes

```jsx
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](/docs/auth0).
