Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for WebAuthn+magic link providers and update login ui preview #314

Merged
merged 6 commits into from
Feb 26, 2024
Merged

Add support for WebAuthn+magic link providers and update login ui preview #314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
13615fa
Add support for webauthn provider
jaclarke Feb 8, 2024
924f0a5
Only query webauthn provider data if it exists in schema
jaclarke Feb 9, 2024
eb3cff6
Add support for magic link provider
jaclarke Feb 15, 2024
60e23c7
Update login ui preview with password+webauthn+magic link behaviour
jaclarke Feb 19, 2024
b92fa66
Fix build warnings
jaclarke Feb 26, 2024
eae43e2
Validate webauthn relying origin is valid url containing protocol+hos…
jaclarke Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 115 additions & 26 deletions shared/studio/tabs/auth/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ import {
DraftAppConfig,
AbstractDraftConfig,
_providersInfo,
LocalWebAuthnProviderData,
LocalMagicLinkProviderData,
} from "./state";

import {encodeB64} from "edgedb/dist/primitives/buffer";
Expand Down Expand Up @@ -803,6 +805,7 @@ const UIConfigForm = observer(function UIConfig({
</div>
</div>
<LoginUIPreview
key={state.providers?.length ?? 0}
draft={
state.newAppAuthSchema
? state.draftCoreConfig!.appConfig!
Expand Down Expand Up @@ -1001,26 +1004,80 @@ const DraftProviderConfigForm = observer(function DraftProviderConfigForm({
</div>
</>
) : providerKind === "Local" ? (
<div className={styles.gridItem}>
<div className={styles.configName}>require_verification</div>
<div className={styles.configInputWrapper}>
<div className={styles.configInput}>
<label className={styles.checkbox}>
<input
type="checkbox"
checked={draftState.requireEmailVerification}
onChange={(e) =>
draftState.setRequireEmailVerification(e.target.checked)
}
/>
</label>
<>
{draftState.selectedProviderType ===
"ext::auth::WebAuthnProviderConfig" ? (
<div className={styles.gridItem}>
<div className={styles.configName}>relying_party_origin</div>
<div className={styles.configInputWrapper}>
<div className={styles.configInput}>
<Input
size={32}
value={draftState.webauthnRelyingOrigin}
onChange={(val) =>
draftState.setWebauthnRelyingOrigin(val)
}
error={draftState.webauthnRelyingOriginError}
/>
</div>
<div className={styles.configExplain}>
The full origin of the sign-in page including protocol and
port of the application. If using the built-in UI, this
should be the origin of the EdgeDB server.
</div>
</div>
</div>
<div className={styles.configExplain}>
Whether the email needs to be verified before the user is
allowed to sign in.
) : null}
{draftState.selectedProviderType ===
"ext::auth::EmailPasswordProviderConfig" ||
draftState.selectedProviderType ===
"ext::auth::WebAuthnProviderConfig" ? (
<div className={styles.gridItem}>
<div className={styles.configName}>require_verification</div>
<div className={styles.configInputWrapper}>
<div className={styles.configInput}>
<label className={styles.checkbox}>
<input
type="checkbox"
checked={draftState.requireEmailVerification}
onChange={(e) =>
draftState.setRequireEmailVerification(
e.target.checked
)
}
/>
</label>
</div>
<div className={styles.configExplain}>
Whether the email needs to be verified before the user is
allowed to sign in.
</div>
</div>
</div>
</div>
</div>
) : null}
{draftState.selectedProviderType ===
"ext::auth::MagicLinkProviderConfig" ? (
<div className={styles.gridItem}>
<div className={styles.configName}>token_time_to_live</div>
<div className={styles.configInputWrapper}>
<div className={styles.configInput}>
<Input
size={16}
value={draftState.tokenTimeToLive}
onChange={(val) =>
draftState.setTokenTimeToLive(val.toUpperCase())
}
error={draftState.tokenTimeToLiveError}
/>
</div>
<div className={styles.configExplain}>
The time after which a magic link token expires. Defaults
to 10 minutes.
</div>
</div>
</div>
) : null}
</>
) : null}
</div>

Expand Down Expand Up @@ -1106,14 +1163,46 @@ function ProviderCard({provider}: {provider: AuthProviderData}) {
</>
) : kind === "Local" ? (
<>
<div className={styles.providerConfigName}>
require_verification
</div>
<div className={styles.providerConfigValue}>
{(
provider as LocalEmailPasswordProviderData
).require_verification.toString()}
</div>
{provider.name === "builtin::local_webauthn" ? (
<>
<div className={styles.providerConfigName}>
relying_party_origin
</div>
<div className={styles.providerConfigValue}>
{
(provider as LocalWebAuthnProviderData)
.relying_party_origin
}
</div>
</>
) : null}
{provider.name === "builtin::local_emailpassword" ||
provider.name === "builtin::local_webauthn" ? (
<>
<div className={styles.providerConfigName}>
require_verification
</div>
<div className={styles.providerConfigValue}>
{(
provider as
| LocalEmailPasswordProviderData
| LocalWebAuthnProviderData
).require_verification.toString()}
</div>
</>
) : null}
{provider.name === "builtin::local_magic_link" ? (
<>
<div className={styles.providerConfigName}>time_to_live</div>
<div className={styles.providerConfigValue}>
{
(provider as LocalMagicLinkProviderData)
.token_time_to_live
}
s
</div>
</>
) : null}
</>
) : null}
</div>
Expand Down
Loading
Loading