useRegister

useRegister calls register method from authProvider under the hood. It registers the app if register method from authProvider resolves and if it rejects shows an error notification.

It returns the result of react-query's useMutation.

Data that is resolved from register will be returned as the data in the query result.

Usage

Normally refine provides a default register page. If you prefer to use this default register page, there is no need to handle register flow manually.
If we want to build a custom register page instead of the default one that comes with refine, useRegister can be used like this:

pages/customRegisterPage

import { useRegister } from "@pankod/refine-core";

type RegisterVariables = {
    email: string;
    password: string;
};

export const RegisterPage = () => {
    const { mutate: register } = useRegister<RegisterVariables>();

    const onSubmit = (values: RegisterVariables) => {
        register(values);
    };

    return (
        <form onSubmit={onSubmit}>
            <label>Email</label>
            <input name="email" value="test@refine.com" />
            <label>Password</label>
            <input name="password" value="refine" />
            <button type="submit">Submit</button>
        </form>
    );
};

TIP

mutate acquired from useRegister can accept any kind of object for values since register method from authProvider doesn't have a restriction on its parameters.
A type parameter for the values can be provided to useRegister.

const { mutate: register } = useRegister<{ email: string; password: string }>();

Logged In after successful registration

If you want to log in the user after successful registration, you can use useLogin hook after useRegister hook onSuccess callback.

pages/customRegisterPage

import { useRegister, useLogin } from "@pankod/refine-core";

type FormVariables = {
    email: string;
    password: string;
};

export const RegisterPage = () => {
    const { mutate: register } = useRegister<FormVariables>();
    const { mutate: login } = useLogin<FormVariables>();

    const onSubmit = (values: FormVariables) => {
        register(values, {
            onSuccess: () => {
                login(values);
            },
        });
    };

    return (
        <form onSubmit={onSubmit}>
            <label>Email</label>
            <input name="email" value="test@refine.com" />
            <label>Password</label>
            <input name="password" value="refine" />
            <button type="submit">Submit</button>
        </form>
    );
};

Redirection after register

We have 2 options for redirecting the app after registering successfully .

A custom url can be resolved from the promise returned from the register method of the authProvider.

const authProvider: AuthProvider = {
    ...
    register: () => {
        ...
        return Promise.resolve("/custom-url");
    }
}

A custom url can be given to mutate the function from the useRegister hook if you want to redirect yourself to a certain url.

import { useRegister } from "@pankod/refine-core";

const { mutate: register } = useRegister();

register({ redirectPath: "/custom-url" });

Then, you can handle this url in your register method of the authProvider.


const authProvider: AuthProvider = {
    ...
    register: ({ redirectPath }) => {
        ...
        return Promise.resolve(redirectPath);
    }
}

If the promise returned from the register method of the authProvider gets resolved with false no redirection will occur.

const authProvider: AuthProvider = {
    ...
    register: () => {
        ...
        return Promise.resolve(false);
    }
}

TIP

If the promise returned from register is resolved with nothing, app will be redirected to the / route by default.

CAUTION

This hook can only be used if authProvider is provided.

Usage​

Logged In after successful registration​

Redirection after register​

Usage

Logged In after successful registration

Redirection after register