Automatically add microsoft account to social account after login

[nguyenphu123]

Hello, I am creating a custom sign up for clerk and it work but I cannot find a way to link to microsoft account automatically. I have tried authenticateWithRedirect sign up but does not work. Is there a way to do it after sign up complete?
Here is my code:
`"use client";
import { useConfettiStore } from "@/hooks/use-confetti-store";
import { clerkClient, useSignUp } from "@clerk/nextjs";
import axios from "axios";
import { redirect, useRouter } from "next/navigation";

import { useState } from "react";

export default function Page() {
const { isLoaded, signUp, setActive } = useSignUp();
const [emailAddress, setEmailAddress] = useState("");
const [confirmCode, setConfirmCode]: any = useState("");
// const confetti = useConfettiStore();
const [password, setPassword] = useState("");
const departmentOptions = ["DEV", "SCC", "DSC", "AM", "BU2"];
const [pendingVerification, setPendingVerification] = useState(false);
const [department, setDepartment] = useState("");
if (!isLoaded) {
// Handle loading state
return null;
}
const router = useRouter();
const handleSubmit = async (e: any) => {
e.preventDefault();

try {
  await signUp.create({
    emailAddress,
  });
  await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
  setPendingVerification(true);
} catch (error) {
  console.log(error);
}

};
// This verifies the user using email code that is delivered.
const onPressVerify = async (e: any) => {
e.preventDefault();
if (!isLoaded) {
return;
}

try {
  const completeSignUp: any = await signUp.attemptEmailAddressVerification({
    code: confirmCode,
  });
  if (completeSignUp.status !== "complete") {
    /*  investigate the response, to see if there was an error
     or if the user needs to complete more steps.*/
    console.log(JSON.stringify(completeSignUp, null, 2));
  }
  if (completeSignUp.status === "complete") {
    completeSignUp["department"] = department;
    await axios.post(`/api/signup`, completeSignUp);

    // confetti.onOpen();
    await setActive({ session: completeSignUp.createdSessionId });
    router.push("/pending");
  }
} catch (err: any) {
  console.error(JSON.stringify(err, null, 2));
}

};
return (

Sign Up

Email:

<input
type="text"
id="email"
value={emailAddress}
onChange={(e) => setEmailAddress(e.target.value)}
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-400"
/>

Password:

<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-400"
/>

Department:

<select
id="department"
value={department}
onChange={(e) => setDepartment(e.target.value)}
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-400"
>
Select Department
{departmentOptions.map((option) => (

{option}

))}

Sign up


{pendingVerification && (

<input
value={confirmCode}
placeholder="Code..."
onChange={(e) => setConfirmCode(e.target.value)}
/>
<button onClick={(e) => onPressVerify(e)}>Verify Email

)}

);
}
`
Thanks in advanced.

[jescalan]

https://github.com/orgs/clerk/discussions/3829