mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-12 06:52:24 +00:00
login component
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { getSession, server } from "#/lib/zitadel";
|
import { getSession, server } from "#/lib/zitadel";
|
||||||
import Alert, { AlertType } from "#/ui/Alert";
|
import Alert, { AlertType } from "#/ui/Alert";
|
||||||
|
import LoginPasskey from "#/ui/LoginPasskey";
|
||||||
import RegisterPasskey from "#/ui/RegisterPasskey";
|
import RegisterPasskey from "#/ui/RegisterPasskey";
|
||||||
import UserAvatar from "#/ui/UserAvatar";
|
import UserAvatar from "#/ui/UserAvatar";
|
||||||
import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
|
import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
|
||||||
@@ -50,9 +51,7 @@ export default async function Page({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{sessionFactors?.id && (
|
{sessionFactors?.id && <LoginPasskey sessionId={sessionFactors.id} />}
|
||||||
<LoginPasskey sessionId={sessionFactors.id} isPrompt={!!prompt} />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -56,87 +56,55 @@ export default function LoginPasskey({ sessionId }: Props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function submitLoginAndContinue(value: Inputs): Promise<boolean | void> {
|
function submitLoginAndContinue(value: Inputs): Promise<boolean | void> {
|
||||||
return submitLogin().then((resp: LoginPasskeyResponse) => {
|
navigator.credentials
|
||||||
const passkeyId = resp.passkeyId;
|
.get({
|
||||||
|
publicKey: resp.publicKeyCredentialCreationOptions,
|
||||||
|
})
|
||||||
|
.then((assertedCredential: any) => {
|
||||||
|
if (assertedCredential) {
|
||||||
|
let authData = new Uint8Array(
|
||||||
|
assertedCredential.response.authenticatorData
|
||||||
|
);
|
||||||
|
let clientDataJSON = new Uint8Array(
|
||||||
|
assertedCredential.response.clientDataJSON
|
||||||
|
);
|
||||||
|
let rawId = new Uint8Array(assertedCredential.rawId);
|
||||||
|
let sig = new Uint8Array(assertedCredential.response.signature);
|
||||||
|
let userHandle = new Uint8Array(
|
||||||
|
assertedCredential.response.userHandle
|
||||||
|
);
|
||||||
|
|
||||||
if (
|
let data = JSON.stringify({
|
||||||
resp.publicKeyCredentialCreationOptions &&
|
id: assertedCredential.id,
|
||||||
resp.publicKeyCredentialCreationOptions.publicKey
|
rawId: coerceToBase64Url(rawId, "rawId"),
|
||||||
) {
|
type: assertedCredential.type,
|
||||||
resp.publicKeyCredentialCreationOptions.publicKey.challenge =
|
response: {
|
||||||
coerceToArrayBuffer(
|
authenticatorData: coerceToBase64Url(authData, "authData"),
|
||||||
resp.publicKeyCredentialCreationOptions.publicKey.challenge,
|
clientDataJSON: coerceToBase64Url(
|
||||||
"challenge"
|
clientDataJSON,
|
||||||
);
|
"clientDataJSON"
|
||||||
resp.publicKeyCredentialCreationOptions.publicKey.user.id =
|
),
|
||||||
coerceToArrayBuffer(
|
signature: coerceToBase64Url(sig, "sig"),
|
||||||
resp.publicKeyCredentialCreationOptions.publicKey.user.id,
|
userHandle: coerceToBase64Url(userHandle, "userHandle"),
|
||||||
"challenge"
|
},
|
||||||
);
|
});
|
||||||
if (
|
|
||||||
resp.publicKeyCredentialCreationOptions.publicKey.excludeCredentials
|
|
||||||
) {
|
|
||||||
resp.publicKeyCredentialCreationOptions.publicKey.excludeCredentials.map(
|
|
||||||
(cred: any) => {
|
|
||||||
cred.id = coerceToArrayBuffer(
|
|
||||||
cred.id as string,
|
|
||||||
"excludeCredentials.id"
|
|
||||||
);
|
|
||||||
return cred;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
navigator.credentials
|
return submitLogin(passkeyId, "", data, sessionId);
|
||||||
.get({
|
} else {
|
||||||
publicKey: resp.publicKeyCredentialCreationOptions,
|
|
||||||
})
|
|
||||||
.then((assertedCredential: any) => {
|
|
||||||
if (assertedCredential) {
|
|
||||||
let authData = new Uint8Array(
|
|
||||||
assertedCredential.response.authenticatorData
|
|
||||||
);
|
|
||||||
let clientDataJSON = new Uint8Array(
|
|
||||||
assertedCredential.response.clientDataJSON
|
|
||||||
);
|
|
||||||
let rawId = new Uint8Array(assertedCredential.rawId);
|
|
||||||
let sig = new Uint8Array(assertedCredential.response.signature);
|
|
||||||
let userHandle = new Uint8Array(
|
|
||||||
assertedCredential.response.userHandle
|
|
||||||
);
|
|
||||||
|
|
||||||
let data = JSON.stringify({
|
|
||||||
id: assertedCredential.id,
|
|
||||||
rawId: coerceToBase64Url(rawId, "rawId"),
|
|
||||||
type: assertedCredential.type,
|
|
||||||
response: {
|
|
||||||
authenticatorData: coerceToBase64Url(authData, "authData"),
|
|
||||||
clientDataJSON: coerceToBase64Url(
|
|
||||||
clientDataJSON,
|
|
||||||
"clientDataJSON"
|
|
||||||
),
|
|
||||||
signature: coerceToBase64Url(sig, "sig"),
|
|
||||||
userHandle: coerceToBase64Url(userHandle, "userHandle"),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return submitVerify(passkeyId, "", data, sessionId);
|
|
||||||
} else {
|
|
||||||
setLoading(false);
|
|
||||||
setError("An error on retrieving passkey");
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error(error);
|
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
// setError(error);
|
setError("An error on retrieving passkey");
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
});
|
}
|
||||||
}
|
})
|
||||||
// return router.push(`/accounts`);
|
.catch((error) => {
|
||||||
});
|
console.error(error);
|
||||||
|
setLoading(false);
|
||||||
|
// setError(error);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// return router.push(`/accounts`);
|
||||||
}
|
}
|
||||||
|
|
||||||
const { errors } = formState;
|
const { errors } = formState;
|
||||||
@@ -174,7 +142,7 @@ export default function LoginPasskey({ sessionId }: Props) {
|
|||||||
className="self-end"
|
className="self-end"
|
||||||
variant={ButtonVariants.Primary}
|
variant={ButtonVariants.Primary}
|
||||||
disabled={loading || !formState.isValid}
|
disabled={loading || !formState.isValid}
|
||||||
onClick={handleSubmit(submitRegisterAndContinue)}
|
onClick={handleSubmit(submitLoginAndContinue)}
|
||||||
>
|
>
|
||||||
{loading && <Spinner className="h-5 w-5 mr-2" />}
|
{loading && <Spinner className="h-5 w-5 mr-2" />}
|
||||||
continue
|
continue
|
||||||
|
|||||||
Reference in New Issue
Block a user