Authentication with React hooks
If you don't want to use our pre-built UI components, you can build your own custom UI using the useAuthenticate
hook.
Email authentication
import React from "react";
import {
type UseAuthenticateResult,
useAuthenticate,
} from "@account-kit/react";
// This examples uses email authentication
// you can also use passkeys if the user has one created
export default function MyLoginPage() {
const { authenticate, isPending } = useAuthenticate();
const [email, setEmail] = React.useState("");
return (
<div>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button onClick={() => authenticate({ type: "email", email })}>
Login
</button>
</div>
);
}
Social Login
You can allow uers to sign in with an OAuth provider like Google, Facebook, or Auth0. There are two login flows that are possible: redirect and popup. The redirect flow redirects the user to the auth provider's login page, then back to a specified page in your application when done. The popup flow opens the auth provider's login page in a popup window without leaving your application, then updates your application when done. If using popup, you need to set the enablePopupOauth
field to true
in the config.
For the authentication methods that Alchemy supports, authenticate by doing the following
import React from "react";
import {
type UseAuthenticateResult,
useAuthenticate,
} from "@account-kit/react";
// This examples uses social login, specifically Google Sign-In
export default function MyLoginPage() {
const { authenticate, isPending } = useAuthenticate();
return (
<div>
<button
onClick={() =>
authenticate({
// redirect login flow
type: "oauth",
authProviderId: "google",
mode: "redirect",
redirectUrl: "/", // After logging in, redirect to the index page
})
}
>
Login (Redirect)
</button>
<button
onClick={() =>
authenticate({
// popup login flow
type: "oauth",
authProviderId: "google",
mode: "popup", // remember to set "enablePopupOauth" to "true" in config.ts to enable
})
}
>
Login (Popup)
</button>
</div>
);
}
To use your own auth provider, follow the instructions on how to do so with Auth0
Passkey auth with email backup
This approach will allow you to log in or sign up users using a passkey as the primary auth mechanism and register an email as a backup.
import React from "react";
import {
type UseAuthenticateResult,
useAuthenticate,
} from "@account-kit/react";
export default function MyLoginPage() {
const { authenticate, isPending } = useAuthenticate();
const [email, setEmail] = React.useState("");
return (
<div>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button onClick={() => authenticate({ type: "passkey", email })}>
Login
</button>
</div>
);
}
Existing Passkey
If your user already has a passkey, then you can authenticate with that directly. This is useful if you want to use email as a signup mechanism, but provide easier login methods for your users via passkeys.
import React from "react";
import {
type UseAuthenticateResult,
useAuthenticate,
} from "@account-kit/react";
export default function MyLoginPage() {
const { authenticate } = useAuthenticate();
return (
<div>
<button
onClick={() => authenticate({ type: "passkey", createNew: false })}
>
Login
</button>
</div>
);
}