Specifying user data (e.g. username) for social Providers?

[wanglophile]

Question 💬

Say I have a registration button that uses the Google Provider:

<button onClick={() => signIn("google")}>
    Register with Google
</button>

Currently, the username seems to be generated off the Google Account's first name.

How can I allow the user to specify a username? And then have the social Provider actually create the account with that username?

I.e. something like

<label htmlFor="username">Username</label>
<input
    name="username"
    type="text"
    required={true}
/>
<button onClick={() => signIn("google")}>Register with Google</button>

I can add user-specific fields for a custom CredentialsProvider but neither the Google Provider documentation nor the Google Provider options seems to provide a "username" field:

// [...nextauth].js
const settings = {
    providers: [
        CredentialsProvider({
            name: "custom",
            id: "custom",
            credentials: {
                username: {
                    label: "Username",
                    type: "text",
                    placeholder: "",
                },
                password: { label: "Password", type: "password" },
            },
            authorize: async (credentials) => {
                const user = await axios
                    .post(
                        `${process.env.NEXT_PUBLIC_API_URL}/auth/login/`,
                        credentials,
                    )
                    .then((response) => {
                        const data = response.data.user;
                        data.access_token = response.data.access_token;
                        data.refresh_token = response.data.refresh_token;
                        return data;
                    })
                    .catch((error) => {
                        return null;
                    });
                if (user) {
                    return user;
                } else {
                    return null;
                }
            },
        }),
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],
}


// CustomLogin.js
function submitHandler(e) {
    e.preventDefault();
    const payload = {
        username: username,
        email: email,
        password1: password,
        password2: password,
    };
    axios
        .post(
            `${process.env.NEXT_PUBLIC_API_URL}/auth/registration/`,
            payload,
        )
        .then((response) => {
            signIn("custom", {
                username: response.data.user.username,
                password: password,
            });
        })
        .catch((error) => {
            console.log("error", error);
        });
}

return(
    <form onSubmit={submitHandler}>
        <label htmlFor="username">Username</label>
        <input
            name="username"
            type="text"
            required={true}
            onChange={(e) => setUsername(e.target.value)}
        />
        <label htmlFor="email">Email</label>
        <input
            name="email"
            type="text"
            onChange={(e) => setEmail(e.target.value)}
        />
        <label htmlFor="password">Password</label>
        <input
            name="password"
            type="password"
            required={true}
            onChange={(e) => setPassword(e.target.value)}
        />
        <input
            type="submit"
            value="Register"
        />
    </form>
)

Is this even possible for Google and other social Provider?

How to reproduce ☕️

Use the default signIn("google") to register an account.
The username is generated based off the Google account's first name.

Contributing 🙌🏽

No, I am afraid I cannot help regarding this