Sure, I’ll copy relevant code below. The only difference is that before we didn’t send any groupedAuthConnectionId param, and the authConnectionId where the default ones offered by web3auth (the same you can currently see for Apple login which is not part of the group).
Google works fine, we see our custom connection “continue to Aniwa”, email works fine too in grouping the accounts and everything but the email content is not whitelabeled anymore..
Here’s login code (react app):
import { useWeb3AuthConnect } from “@web3auth/modal/react”;
import { AUTH_CONNECTION, WALLET_CONNECTORS } from “@web3auth/modal”;
import { useQueryClient } from “@tanstack/react-query”;
type LoginProps = {
isAdmin?: boolean;
};
const showMetamask = false;
export const Login: FC = ({ isAdmin = false }) => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const { connectTo } = useWeb3AuthConnect();
const { successToast, errorToast } = useCustomToast();
const [searchParams] = useSearchParams();
const [email, setEmail] = useState(“”);
const [isLoading, setIsLoading] = useState<{
email: boolean;
google: boolean;
apple: boolean;
metamask: boolean;
}>({
email: false,
google: false,
apple: false,
metamask: false
});
const handleLoginError = (error: any) => {
console.error(*error*);
if (
*error*?.message?.includes("popup") &&
*error*?.message?.includes("closed")
) {
errorToast(t("loginPopupClosed", { ns: "login" }), false);
} else {
errorToast(t("loginError", { ns: "login" }), false);
}
};
const connectWithEmail = async (email: string) => {
if (!validateEmail(*email*)) {
errorToast(t("invalidEmail", { ns: "login" }), false);
return;
}
queryClient.invalidateQueries();
setIsLoading((*prev*) => ({ ...*prev*, email: true }));
sendLoginStartEvent("email");
try {
await connectTo(WALLET_CONNECTORS.AUTH, {
authConnection: AUTH_CONNECTION.EMAIL_PASSWORDLESS,
authConnectionId: "w3a-email-passwordless-aniwa",
groupedAuthConnectionId: "aniwa-google-email-group",
extraLoginOptions: {
login_hint: *email*.trim().toLowerCase(),
isUserIdCaseSensitive: false
},
appState: CONNECTING_STATE
});
} catch (error) {
handleLoginError(error);
} finally {
setIsLoading((*prev*) => ({ ...*prev*, email: false }));
}
};
const connectWithApple = async () => {
queryClient.invalidateQueries();
setIsLoading((*prev*) => ({ ...*prev*, apple: true }));
sendLoginStartEvent("apple");
try {
await connectTo(WALLET_CONNECTORS.AUTH, {
authConnection: AUTH_CONNECTION.APPLE,
extraLoginOptions: {
isUserIdCaseSensitive: false
},
appState: CONNECTING_STATE
});
} catch (error) {
handleLoginError(error);
} finally {
setIsLoading((*prev*) => ({ ...*prev*, apple: false }));
}
};
const connectWithGoogle = async () => {
queryClient.invalidateQueries();
setIsLoading((*prev*) => ({ ...*prev*, google: true }));
sendLoginStartEvent("google");
try {
await connectTo(WALLET_CONNECTORS.AUTH, {
authConnection: AUTH_CONNECTION.GOOGLE,
authConnectionId: "aniwa-googleauth-custom",
groupedAuthConnectionId: "aniwa-google-email-group",
extraLoginOptions: {
isUserIdCaseSensitive: false
},
appState: CONNECTING_STATE
});
} catch (error) {
handleLoginError(error);
} finally {
setIsLoading((*prev*) => ({ ...*prev*, google: false }));
}
};
const connectWithMetamask = async () => {
queryClient.invalidateQueries();
setIsLoading((*prev*) => ({ ...*prev*, metamask: true }));
sendLoginStartEvent("metamask");
try {
await connectTo(WALLET_CONNECTORS.METAMASK);
} catch (error) {
handleLoginError(error);
} finally {
setIsLoading((*prev*) => ({ ...*prev*, metamask: false }));
}
};
return (
<Flex
…..
