<@U04UQ68083H> i want to login with phone number (...
# ory-copilotc
cold-air-52564
03/24/2025, 6:47 AM@chilly-king-10285 i want to login with phone number ( my identifier ) and passkey , can i do it
b
brief-egg-61061
03/24/2025, 6:47 AMA message from kapa.ai
brief-egg-61061
03/24/2025, 6:47 AMYes, you can use a phone number as your identifier and authenticate with passkeys in Ory Kratos. This is fully supported through proper configuration of your identity schema. To set this up, you need to: 1. Enable the passkey strategy in your configuration 2. Configure your identity schema to use phone number as an identifier and for passkey display name Here's how your identity schema should look:
Copy code
json { "$id": "<https://example.com/registration.schema.json>", "$schema": "<http://json-schema.org/draft-07/schema#>", "title": "Person", "type": "object", "properties": { "traits": { "type": "object", "properties": { "phone": { "type": "string", "format": "tel", "<http://ory.sh/kratos|ory.sh/kratos>": { "credentials": { "password": { "identifier": true }, "passkey": { "display_name": true } } } } } } } }"identifier": true"display_name": truec
cold-air-52564
03/24/2025, 6:50 AM@chilly-king-10285 this is my code for login with phone and otp can you add new button for login with passkey with functionality , please update the code : "use client";
import { useState, useEffect, useCallback } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import ory from "../../../pkg/sdk";
import { enqueueSnackbar } from "notistack";
export default function Login() {
const [email, setEmail] = useState("");
const [otp, setOtp] = useState("");
const [flow, setFlow] = useState(null);
const [passkeyData, setPasskeyData] = useState(null);
const [step, setStep] = useState("email");
const router = useRouter();
const params = useSearchParams();
const initializeFlow = async () => {
try {
const { data } = await ory.createBrowserLoginFlow({
refresh: false,
aal: "aal1",
returnTo: "/",
});
setFlow(data);
} catch (error) {
console.error("Error initializing login flow:", error);
}
};
useEffect(() => {
const flowId = params.get("flow");
if (flowId) {
ory
.getLoginFlow({ id: flowId })
.then(({ data }) => {
setFlow(data);
})
.catch((err) => {
console.error(err);
initializeFlow();
});
} else {
initializeFlow();
}
}, [router, params]);
const handleEmailSubmit = async (e) => {
e.preventDefault();
if (!flow) return;
try {
const { data } = await ory.updateLoginFlow({
flow: flow.id,
updateLoginFlowBody: {
method: "code",
identifier: email,
csrf_token: flow.ui.nodes.find(
(node) => node.attributes.name === "csrf_token",
)?.attributes.value,
},
});
setFlow(data);
setStep("otp");
} catch (error) {
if (error?.response?.data?.state === "sent_email") {
enqueueSnackbar("OTP sent to your email", { variant: "success" });
setStep("otp");
} else {
enqueueSnackbar("Something went wrong", { variant: "error" });
}
}
};
const handleOtpSubmit = async (e) => {
e.preventDefault();
if (!flow) return;
try {
const { data } = await ory.updateLoginFlow({
flow: flow.id,
updateLoginFlowBody: {
method: "code",
code: otp,
identifier: email,
csrf_token: flow.ui.nodes.find(
(node) => node.attributes.name === "csrf_token",
)?.attributes.value,
},
});
if (data.session) {
router.push("/auth");
} else if (data.continue_with) {
setStep("passkey");
} else {
console.error("OTP verification failed:", data);
}
} catch (error) {
console.error("Error verifying OTP:", error);
}
};
const handlePasskeyAuthentication = useCallback(async () => {
if (!flow || !passkeyData) return;
try {
const credential = await navigator.credentials.get({
publicKey: passkeyData.publicKey,
});
const { data } = await ory.updateLoginFlow({
flow: flow.id,
updateLoginFlowBody: {
method: "passkey",
identifier: email,
passkey: JSON.stringify(credential),
csrf_token: flow.ui.nodes.find(
(node) => node.attributes.name === "csrf_token",
)?.attributes.value,
},
});
if (data.session) {
enqueueSnackbar("Login successful", { variant: "success" });
router.push("/auth");
} else {
enqueueSnackbar("Passkey authentication failed", { variant: "error" });
}
} catch (error) {
console.error("Error during passkey authentication:", error);
enqueueSnackbar("Passkey authentication failed", { variant: "error" });
}
}, [flow, passkeyData, email, router]);
useEffect(() => {
if (step === "passkey" && flow?.continue_with) {
const passkeyChallenge = flow.continue_with.find(
(item) => item.action === "show_passkey",
);
if (passkeyChallenge) {
setPasskeyData(passkeyChallenge.passkey);
}
}
}, [step, flow]);
if (!flow) {
return <div>Loading...</div>;
}
return (
<div
style={{
maxWidth: "500px",
margin: "0 auto",
padding: "20px",
border: "1px solid #ccc",
borderRadius: "8px",
boxShadow: "0 0 10px rgba(0,0,0,0.1)",
}}
>
{step === "email" && (
<form
onSubmit={handleEmailSubmit}
style={{ display: "flex", flexDirection: "column", gap: "10px" }}
>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
required
style={{
padding: "10px",
borderRadius: "4px",
border: "1px solid #ccc",
}}
/>
<input
type="hidden"
name="csrf_token"
value={
flow?.ui.nodes.find(
(node) => node.attributes.name === "csrf_token",
)?.attributes.value
}
/>
<button
type="submit"
style={{
padding: "10px",
borderRadius: "4px",
border: "none",
backgroundColor: "#007BFF",
color: "#fff",
cursor: "pointer",
}}
>
Send OTP
</button>
</form>
)}
{step === "otp" && (
<form
onSubmit={handleOtpSubmit}
style={{ display: "flex", flexDirection: "column", gap: "10px" }}
>
<input
type="text"
value={otp}
onChange={(e) => setOtp(e.target.value)}
placeholder="Enter OTP"
required
style={{
padding: "10px",
borderRadius: "4px",
border: "1px solid #ccc",
}}
/>
<input
type="hidden"
name="csrf_token"
value={
flow?.ui.nodes.find(
(node) => node.attributes.name === "csrf_token",
)?.attributes.value
}
/>
<button
type="submit"
style={{
padding: "10px",
borderRadius: "4px",
border: "none",
backgroundColor: "#007BFF",
color: "#fff",
cursor: "pointer",
}}
>
Verify OTP
</button>
</form>
)}
{step === "passkey" && (
<div style={{ textAlign: "center" }}>
<h2>Passkey Authentication</h2>
<p>Please use your passkey to complete the login process.</p>
<button
onClick={handlePasskeyAuthentication}
style={{
padding: "10px",
borderRadius: "4px",
border: "none",
backgroundColor: "#007BFF",
color: "#fff",
cursor: "pointer",
}}
>
Continue with Passkey
</button>
</div>
)}
</div>
);
}
b
brief-egg-61061
03/24/2025, 6:50 AMA message from kapa.ai
brief-egg-61061
03/24/2025, 6:51 AMSorry @cold-air-52564, I seem to be having a bit of trouble. Don't worry though, I've pinged my support folks and they will try to fix me up! 🧑💻
Perhaps try again in 5mins?
c
cold-air-52564
03/24/2025, 6:52 AM@chilly-king-10285 can you try now ?
b
brief-egg-61061
03/24/2025, 6:52 AMA message from kapa.ai
brief-egg-61061
03/24/2025, 6:53 AMI need more information to help you properly. Your question "can you try now?" is quite brief, and I'm not sure what you'd like me to try. If you're asking me to test the code I provided in my previous response, I should clarify that I can't execute code or interact with external systems. The code I provided was based on the knowledge sources about Ory's passkey implementation. If you're encountering issues with the passkey login implementation, please share: - Any specific errors you're seeing - Which part of the implementation isn't working as expected - Any browser console logs related to the WebAuthn API calls This would help me provide more targeted assistance with your Ory passkey implementation. I'd be happy to help troubleshoot specific issues or suggest improvements to the code based on Ory's documentation.
c
cold-air-52564
03/24/2025, 6:54 AM@chilly-king-10285 i'm asking to update the code to login with passkey also
b
brief-egg-61061
03/24/2025, 6:54 AMA message from kapa.ai
brief-egg-61061
03/24/2025, 6:55 AMSorry @cold-air-52564, I seem to be having a bit of trouble. Don't worry though, I've pinged my support folks and they will try to fix me up! 🧑💻
Perhaps try again in 5mins?
4 Views