Logto Authentication Flows: PKCE, SAML, Passkeys, and MFA Explained
Logto supports eleven distinct authentication flows ranging from standard OIDC Authorization Code with PKCE to enterprise SAML SSO, WebAuthn passkeys, and MFA challenges, all orchestrated through the packages/core/src/libraries/sign-in-experience directory.
Logto is a full-stack identity provider that implements OpenID Connect (OIDC) and OAuth 2.1 specifications. The logto-io/logto repository organizes these Logto authentication flows into composable libraries within packages/core, allowing developers to combine PKCE, social connectors, and passwordless methods via configuration parameters like first_screen and prompt.
Authorization Code Flow with PKCE
The Authorization Code Flow with PKCE is the default and recommended method for single-page applications (SPAs), web apps, and native clients. In packages/core/src/libraries/sign-in-experience/sign-in.ts, Logto issues an authorization_code that clients exchange for access tokens and ID tokens.
import logtoClient from '@logto/client';
await logtoClient.signIn({
redirectUri: 'https://my.app/callback',
extraParams: { ui_locales: 'fr' },
});
This implementation follows the OIDC standard where the signIn() method handles the redirect to the authorization endpoint and manages the PKCE verifier.
Machine-to-Machine Authentication (Client Credentials)
For service-to-service communication, Logto implements the OAuth 2.1 Client Credentials Flow. The implementation resides in packages/api/src/client-credentials.ts, where applications authenticate using client ID and secret pairs to receive bearer tokens.
import { createApi } from '@logto/api';
const api = createApi({
endpoint: 'https://logto.io',
clientId: 'my-m2m-client',
clientSecret: '*****',
});
const token = await api.getAccessToken();
Social and Enterprise SSO
Social Login via OAuth 2.0 Connectors
Logto provides pre-built connectors for Google, GitHub, and other OAuth 2.0 providers located in packages/connectors/. Each connector follows the provider's authorization code grant as documented in packages/connectors/connector-google/README.md.
await logtoClient.signIn({
redirectUri: 'https://my.app/callback',
connectorId: 'google',
});
Enterprise SSO with SAML 2.0
For enterprise identity providers, Logto supports SAML 2.0 with both SP-initiated and IdP-initiated flows. The logic is split between packages/connectors/connector-saml/README.md and packages/core/src/libraries/sso-connector.ts, handling redirect-binding requests and POST-binding assertions.
await logtoClient.signIn({
redirectUri: 'https://my.app/callback',
connectorId: 'saml-connector-id',
});
Passwordless Authentication
Passkey (WebAuthn) Login
Logto implements passwordless authentication using the WebAuthn API in packages/core/src/libraries/verification-helpers/webauthn.ts. The flow creates credentials, stores public keys, and validates assertions without passwords.
await logtoClient.signIn({
redirectUri: 'https://my.app/callback',
passkey: true,
});
Magic Link Authentication
Magic Link authentication sends one-time token links via email, validated through packages/core/src/libraries/verification-helpers/backup-code-validation.ts. Clicking the link completes the sign-in session.
await logtoClient.signIn({
redirectUri: 'https://my.app/callback',
email: 'user@example.com',
useMagicLink: true,
});
Direct Password Authentication
For applications requiring traditional credentials, Logto provides Password Login via username and password verification. This flow is implemented in packages/core/src/libraries/user-password-verification.ts, validating credentials directly against Logto's user store before issuing tokens.
Multi-Factor Authentication (MFA)
After primary authentication, Logto can require secondary verification via TOTP, backup codes, or email OTP. The MFA orchestration logic lives in packages/core/src/libraries/sign-in-experience/mfa.ts.
await logtoClient.signIn({
redirectUri: 'https://my.app/callback',
mfa: true,
});
Specialized and Legacy Flows
Password Reset Flow
Users initiate password recovery through the first_screen=reset_password parameter, handled in packages/experience/src/pages/ResetPasswordLanding/index.tsx. This starts a dedicated sign-in session for credential recovery.
await logtoClient.signIn({
redirectUri: 'https://my.app/callback',
first_screen: 'reset_password',
});
Implicit and Hybrid Flows
While deprecated in favor of PKCE, Logto maintains support for legacy Implicit flows in packages/core/src/libraries/sign-in-experience/sign-in.ts for applications requiring direct ID tokens from the authorization endpoint.
Consent and Authorization
For third-party applications, Logto displays consent screens before token issuance, managed within packages/core/src/libraries/sign-in-experience/consent.ts. This ensures users explicitly authorize scopes requested by external clients.
Configuring Flow Entry Points
Developers control which flow initiates by passing the first_screen parameter in authentication requests. Supported values include sign_in, sign_up, reset_password, and consent, as implemented in packages/experience/src/pages/IdentifierSignIn/index.tsx. This parameter allows dynamic selection of authentication entry points without reconfiguring the application.
Summary
- Logto authentication flows encompass eleven distinct methods including PKCE, Client Credentials, SAML SSO, WebAuthn passkeys, and MFA.
- The core flow logic resides in
packages/core/src/libraries/sign-in-experience/, while connectors live inpackages/connectors/. - PKCE is the recommended standard for SPAs and mobile apps, implemented in
sign-in.ts. - Machine-to-machine authentication uses Client Credentials in
packages/api/src/client-credentials.ts. - Enterprise SSO supports SAML 2.0 with SP-initiated and IdP-initiated flows via
sso-connector.ts. - Passwordless options include WebAuthn passkeys (
webauthn.ts) and Magic Links (backup-code-validation.ts). - The
first_screenparameter enables dynamic routing to sign-in, sign-up, or password-reset flows.
Frequently Asked Questions
What is the default authentication flow in Logto?
The default authentication flow is the Authorization Code Flow with PKCE, implemented in packages/core/src/libraries/sign-in-experience/sign-in.ts. This flow is required for all modern single-page applications and mobile clients, providing secure token exchange without exposing client secrets in browser-based environments.
Can I combine multiple authentication methods in Logto?
Yes, Logto flows are composable. You can combine PKCE with MFA, SAML with passkeys, or social login with magic links by configuring the appropriate options in the sign-in request. The MFA logic in packages/core/src/libraries/sign-in-experience/mfa.ts specifically handles secondary challenges after primary authentication succeeds.
How do I enable passwordless login with WebAuthn?
Enable WebAuthn passkey authentication by setting passkey: true in your sign-in request. The implementation in packages/core/src/libraries/verification-helpers/webauthn.ts handles credential creation, public key storage, and assertion validation. Users can authenticate using biometric sensors or hardware security keys without entering passwords.
Is the Implicit flow still supported in Logto?
Yes, though deprecated in favor of PKCE, Logto maintains Implicit flow support in packages/core/src/libraries/sign-in-experience/sign-in.ts for legacy integrations that require ID tokens directly from the authorization endpoint. New implementations should use PKCE for enhanced security.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" Maintain an open-source project? Get it listed too →