Auth0 Login

Auth0 is a flexible, drop-in solution for adding authentication and authorization services to your applications. Your team and organization can avoid the cost, time, and risk that comes with building your own solution to authenticate and authorize users. You can check the Auth0 document for details.

We will show you how to use Auth0 with refine

Installation

Run the following command within your project directory to install the Auth0 React SDK:

npm install @auth0/auth0-react

Configure the Auth0Provider component

Wrap your root component with an Auth0Provider that you can import from the SDK.

index.tsx

import React from "react";
import ReactDOM from "react-dom";

import { Auth0Provider } from "@auth0/auth0-react";

import App from "./App";

ReactDOM.render(
    <React.StrictMode>
        <Auth0Provider
            domain="YOUR_DOMAIN"
            clientId="YOUR_CLIENT_ID"
            redirectUri={window.location.origin}
        >
            <App />
        </Auth0Provider>
    </React.StrictMode>,
    document.getElementById("root"),
);

info

Refer to Auth0 docs for detailed configuration.

Override login page

First, we need to override the refine login page. In this way, we will redirect it to the Auth0 login page. We create a login.tsx file in the /pages folder.

/pages/login.tsx

import { 
    Row,
    Col,
    AntdLayout,
    Card,
    Typography,
    Button,
    useLogin
} from "@pankod/refine";

export const Login: React.FC = () => {
    const { mutate: login } = useLogin();

    const CardTitle = (
        <div
            style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "60px",
            }}
        >
            <img src="./refine.svg" alt="Logo" />
        </div>
    );

    return (
        <AntdLayout
            style={{
                backgroundColor: "#eff7f7",
            }}
        >
            <Row
                justify="center"
                align="middle"
                style={{
                    height: "100vh",
                }}
            >
                <Col xs={22}>
                    <Card
                        style={{
                            maxWidth: "400px",
                            margin: "auto",
                        }}
                        title={CardTitle}
                    >
                        <Button
                            type="primary"
                            size="large"
                            htmlType="submit"
                            block
                            onClick={() => login({})}
                        >
                            Login
                        </Button>
                        <br />
                        <br />
                        <div
                            style={{ textAlign: "center", padding: "10px 0px" }}
                        >
                            <Typography.Text>
                                Still no account? Please go to
                                <a href="#"> Sign up</a>
                            </Typography.Text>
                        </div>
                    </Card>
                </Col>
            </Row>
        </AntdLayout>
    );
};

After clicking the Login button, you will be directed to the auth0 login screen.

Auth Provider

In refine, authentication and authorization processes are performed with the auth provider. Let's write a provider for Auth0.

App.tsx

import { Refine } from "@pankod/refine";
import dataProvider from "@pankod/refine-simple-rest";
import routerProvider from "@pankod/refine-react-router";
import { useAuth0 } from "@auth0/auth0-react";

import { Login } from "pages/login";

import axios from "axios";


const API_URL = "https://api.fake-rest.refine.dev";

const App = () => {
    const {
        isLoading,
        loginWithRedirect,
        isAuthenticated,
        user,
        logout,
        getIdTokenClaims,
    } = useAuth0();

    if (isLoading) {
        return <span>loading...</span>;
    }

    const authProvider: AuthProvider = {
        login: () => {
            loginWithRedirect();
            return Promise.resolve();
        },
        logout: () => {
            logout({ returnTo: window.location.origin });
            return Promise.resolve("/");
        },
        checkError: () => Promise.resolve(),
        checkAuth: () => {
            if (isAuthenticated) {
                return Promise.resolve();
            }

            return Promise.reject();
        },
        getPermissions: () => Promise.resolve(),
        getUserIdentity: () => {
            if (user) {
                return Promise.resolve({
                    ...user,
                    avatar: user.picture,
                });
            }
        },
    };

    getIdTokenClaims().then((token) => {
        if (token) {
            axios.defaults.headers.common = {
                Authorization: `Bearer ${token.__raw}`,
            };
        }
    });

    return (
        <Refine
            LoginPage={Login}
            routerProvider={routerProvider}
            authProvider={authProvider}
            dataProvider={dataProvider(API_URL, axios)}
        />
    );
};

export default App;

login

loginWithRedirect method comes from the useAuth0 hook.

logout

logout method comes from the useAuth0 hook.

checkError & getPermissions

We revert to empty promise because Auth0 does not support it.

checkAuth

We can use the isAuthenticated method, which returns the authentication status of the useAuth0 hook.

getUserIdentity

We can use it with the user from the useAuth0 hook.

Live Codesandbox Example

Auth0 example doesn't work in codesandbox embed mode. With this link, you can open the example in the browser and try it.