import { PasswordClient } from "./lib/client/PasswordClient";
import { UserClient } from "./lib/client/UserClient";
import { WebauthnClient } from "./lib/client/WebauthnClient";
+import { EmailClient } from "./lib/client/EmailClient";
/**
* A class that bundles all available SDK functions.
@@ -103,6 +104,7 @@
A 'MaxNumOfEmailAddressesReachedError' occurs when the user tries to add a new email address while the maximum number
+of email addresses (see backend configuration) equals the number of email addresses already registered.
- Performs a WebAuthn authentication ceremony. When 'userID' is specified, the API provides a list of
-allowed credentials and the browser is able to present a list of suitable credentials to the user.
+ Deletes the WebAuthn credential.
- Determines whether a credential registration ceremony should be performed. Returns 'true' when WebAuthn
-is supported and the user's credentials do not intersect with the credentials already known on the
-current browser/device.
+ Performs a WebAuthn authentication ceremony. When 'userID' is specified, the API provides a list of
+allowed credentials and the browser is able to present a list of suitable credentials to the user.
+ Determines whether a credential registration ceremony should be performed. Returns 'true' when WebAuthn
+is supported and the user's credentials do not intersect with the credentials already known on the
+current browser/device.
+
* @category SDK
* @subcategory DTO
* @property {boolean} enabled - Indicates passwords are enabled, so the API accepts login attempts using passwords.
+ * @property {number} min_password_length - The minimum length of a password. To be used for password validation.
*/
interface PasswordConfig {
enabled: boolean;
+ min_password_length: number;
+}
+
+/**
+ * @interface
+ * @category SDK
+ * @subcategory DTO
+ * @property {boolean} require_verification - Indicates that email addresses must be verified.
+ * @property {number} max_num_of_addresses - The maximum number of email addresses a user can have.
+ */
+interface EmailConfig {
+ require_verification: boolean;
+ max_num_of_addresses: number;
}
/**
@@ -105,6 +119,7 @@
* @subcategory DTO
* @property {string} id - The UUID of the user.
* @property {boolean} verified - Indicates whether the user's email address is verified.
+ * @property {string} email_id - The UUID of the email address.
* @property {boolean} has_webauthn_credential - Indicates that the user has registered a WebAuthn credential in the past.
*/
interface UserInfo {
id: string;
verified: boolean;
+ email_id: string;
has_webauthn_credential: boolean;
}
@@ -164,7 +181,7 @@
import { WebauthnState } from "../state/WebauthnState";
+
import {
+ create as createWebauthnCredential,
+ get as getWebauthnCredential,
+} from "@github/webauthn-json";
+
+import { WebauthnSupport } from "../WebauthnSupport";
+import { Client } from "./Client";
+import { PasscodeState } from "../state/PasscodeState";
+
+import { WebauthnState } from "../state/WebauthnState";
+
import {
InvalidWebauthnCredentialError,
TechnicalError,
@@ -93,13 +103,13 @@
lib/client/WebauthnClient.ts
WebauthnRequestCancelledError,
UserVerificationError,
} from "../Errors";
+
import {
- create as createWebauthnCredential,
- get as getWebauthnCredential,
-} from "@github/webauthn-json";
-import { Attestation, User, WebauthnFinalized } from "../Dto";
-import { WebauthnSupport } from "../WebauthnSupport";
-import { Client } from "./Client";
+ Attestation,
+ User,
+ WebauthnFinalized,
+ WebauthnCredentials,
+} from "../Dto";
/**
* A class that handles WebAuthn authentication and registration.
@@ -110,7 +120,8 @@
* @property {string=} id - The UUID of the active passcode.
* @property {number=} ttl - Timestamp until when the passcode is valid in seconds (since January 1, 1970 00:00:00 UTC).
* @property {number=} resendAfter - Seconds until a passcode can be resent.
+ * @property {emailID=} emailID - The email address ID.
*/
export interface LocalStoragePasscode {
id?: string;
ttl?: number;
resendAfter?: number;
+ emailID?: string;
}
/**
@@ -156,6 +158,29 @@
lib/state/PasscodeState.ts
return this;
}
+ /**
+ * Gets the UUID of the email address.
+ *
+ * @param {string} userID - The UUID of the user.
+ * @return {string}
+ */
+ getEmailID(userID: string): string {
+ return this.getState(userID).emailID;
+ }
+
+ /**
+ * Sets the UUID of the email address.
+ *
+ * @param {string} userID - The UUID of the user.
+ * @param {string} emailID - The UUID of the email address.
+ * @return {PasscodeState}
+ */
+ setEmailID(userID: string, emailID: string): PasscodeState {
+ this.getState(userID).emailID = emailID;
+
+ return this;
+ }
+
/**
* Removes the active passcode.
*
@@ -168,6 +193,7 @@
lib/state/PasscodeState.ts
delete passcode.id;
delete passcode.ttl;
delete passcode.resendAfter;
+ delete passcode.emailID;
return this;
}
diff --git a/docs/static/jsdoc/hanko-frontend-sdk/lib_state_PasswordState.ts.html b/docs/static/jsdoc/hanko-frontend-sdk/lib_state_PasswordState.ts.html
index 145a0e57d..a32145f76 100644
--- a/docs/static/jsdoc/hanko-frontend-sdk/lib_state_PasswordState.ts.html
+++ b/docs/static/jsdoc/hanko-frontend-sdk/lib_state_PasswordState.ts.html
@@ -68,7 +68,7 @@
diff --git a/docs/static/jsdoc/hanko-frontend-sdk/lib_state_State.ts.html b/docs/static/jsdoc/hanko-frontend-sdk/lib_state_State.ts.html
index ec38f817c..d8ca91080 100644
--- a/docs/static/jsdoc/hanko-frontend-sdk/lib_state_State.ts.html
+++ b/docs/static/jsdoc/hanko-frontend-sdk/lib_state_State.ts.html
@@ -68,7 +68,7 @@
diff --git a/docs/static/jsdoc/hanko-frontend-sdk/lib_state_UserState.ts.html b/docs/static/jsdoc/hanko-frontend-sdk/lib_state_UserState.ts.html
index 3dafebb40..f1fcbbf0e 100644
--- a/docs/static/jsdoc/hanko-frontend-sdk/lib_state_UserState.ts.html
+++ b/docs/static/jsdoc/hanko-frontend-sdk/lib_state_UserState.ts.html
@@ -68,7 +68,7 @@
diff --git a/docs/static/jsdoc/hanko-frontend-sdk/lib_state_WebauthnState.ts.html b/docs/static/jsdoc/hanko-frontend-sdk/lib_state_WebauthnState.ts.html
index fb89a8b87..7d88dfd44 100644
--- a/docs/static/jsdoc/hanko-frontend-sdk/lib_state_WebauthnState.ts.html
+++ b/docs/static/jsdoc/hanko-frontend-sdk/lib_state_WebauthnState.ts.html
@@ -68,7 +68,7 @@
diff --git a/docs/static/spec/admin.yaml b/docs/static/spec/admin.yaml
index b20c7e925..3ad9e964f 100644
--- a/docs/static/spec/admin.yaml
+++ b/docs/static/spec/admin.yaml
@@ -50,43 +50,6 @@ paths:
'500':
$ref: '#/components/responses/InternalServerError'
/users/{id}:
- patch:
- summary: 'Update a user by ID'
- operationId: updateUser
- tags:
- - User Management
- parameters:
- - name: id
- in: path
- description: ID of the user
- required: true
- schema:
- $ref: '#/components/schemas/UUID4'
- requestBody:
- content:
- application/json:
- schema:
- type: object
- properties:
- email:
- type: string
- format: email
- status:
- type: string
- enum: [active, inactive]
- responses:
- '200':
- description: 'Updated user details'
- content:
- application/json:
- schema:
- $ref: '#/components/schemas/User'
- '400':
- $ref: '#/components/responses/BadRequest'
- '404':
- $ref: '#/components/responses/NotFound'
- '500':
- $ref: '#/components/responses/InternalServerError'
delete:
summary: 'Delete a user by ID'
operationId: deleteUser
diff --git a/docs/static/spec/public.yaml b/docs/static/spec/public.yaml
index 71f01cc15..b3da9e06a 100644
--- a/docs/static/spec/public.yaml
+++ b/docs/static/spec/public.yaml
@@ -1,7 +1,7 @@
openapi: 3.0.0
info:
- version: '0.3.0'
+ version: '0.4.0'
title: 'Hanko Public API'
description: |
## Introduction
@@ -60,7 +60,8 @@ paths:
summary: 'Initialize passcode login'
description: |
Initialize a passcode login for the user identified by `user_id`. Sends an email
- containing the actual passcode to the user. Returns a representation of the passcode.
+ containing the actual passcode to the user's primary email address or to the address specified
+ through `email_id`. Returns a representation of the passcode.
operationId: passcodeInit
tags:
- Passcode
@@ -74,6 +75,11 @@ paths:
description: The ID of the user
allOf:
- $ref: '#/components/schemas/UUID4'
+ email_id:
+ description: The ID of the email address
+ allOf:
+ - $ref: '#/components/schemas/UUID4'
+ required: false
responses:
'200':
description: 'Successful passcode login initialization'
@@ -138,6 +144,8 @@ paths:
$ref: '#/components/responses/BadRequest'
'401':
$ref: '#/components/responses/Unauthorized'
+ '403':
+ $ref: '#/components/responses/Forbidden'
'408':
$ref: '#/components/responses/RequestTimeOut'
'410':
@@ -409,6 +417,95 @@ paths:
$ref: '#/components/responses/BadRequest'
'500':
$ref: '#/components/responses/InternalServerError'
+ /webauthn/credentials:
+ get:
+ summary: 'Get a list of WebAuthn credentials'
+ description: |
+ Returns a list of WebAuthn credentials assigned to the current user.
+ operationId: listCredentials
+ tags:
+ - WebAuthn
+ security:
+ - CookieAuth: [ ]
+ - BearerTokenAuth: [ ]
+ responses:
+ '200':
+ description: 'A list of WebAuthn credentials assigned to the current user'
+ content:
+ application/json:
+ schema:
+ $ref: '#/components/schemas/WebauthnCredentials'
+ '401':
+ $ref: '#/components/responses/Unauthorized'
+ '500':
+ $ref: '#/components/responses/InternalServerError'
+ /webauthn/credentials/{id}:
+ patch:
+ summary: 'Updates a WebAuthn credential'
+ description: |
+ Updates the specified WebAuthn credential. Only credentials assigned to the current user can be updated.
+ operationId: updateCredential
+ tags:
+ - WebAuthn
+ security:
+ - CookieAuth: [ ]
+ - BearerTokenAuth: [ ]
+ parameters:
+ - name: id
+ in: path
+ description: ID of the WebAuthn credential
+ required: true
+ schema:
+ $ref: '#/components/schemas/UUID4'
+ requestBody:
+ content:
+ application/json:
+ schema:
+ type: object
+ properties:
+ name:
+ description: "A new credential name. Has no technical meaning, only serves as an identification aid for the user."
+ type: string
+ required: false
+ responses:
+ '201':
+ description: 'Credential updated successfully'
+ '400':
+ $ref: '#/components/responses/BadRequest'
+ '401':
+ $ref: '#/components/responses/Unauthorized'
+ '404':
+ $ref: '#/components/responses/NotFound'
+ '500':
+ $ref: '#/components/responses/InternalServerError'
+ delete:
+ summary: 'Deletes a WebAuthn credential'
+ description: |
+ Deletes the specified WebAuthn credential.
+ operationId: deleteCredential
+ tags:
+ - WebAuthn
+ security:
+ - CookieAuth: [ ]
+ - BearerTokenAuth: [ ]
+ parameters:
+ - name: id
+ in: path
+ description: ID of the WebAuthn credential
+ required: true
+ schema:
+ $ref: '#/components/schemas/UUID4'
+ responses:
+ '201':
+ description: 'Credential updated successfully'
+ '400':
+ $ref: '#/components/responses/BadRequest'
+ '401':
+ $ref: '#/components/responses/Unauthorized'
+ '404':
+ $ref: '#/components/responses/NotFound'
+ '500':
+ $ref: '#/components/responses/InternalServerError'
/.well-known/jwks.json:
get:
summary: 'Get JSON Web Key Set'
@@ -471,6 +568,8 @@ paths:
properties:
id:
$ref: '#/components/schemas/UUID4'
+ email_id:
+ $ref: '#/components/schemas/UUID4'
verified:
type: boolean
has_webauthn_credential:
@@ -532,7 +631,7 @@ paths:
content:
application/json:
schema:
- $ref: '#/components/schemas/User'
+ $ref: '#/components/schemas/CreateUserResponse'
'400':
$ref: '#/components/responses/BadRequest'
'409':
@@ -567,6 +666,104 @@ paths:
$ref: '#/components/responses/NotFound'
'500':
$ref: '#/components/responses/InternalServerError'
+ /emails:
+ get:
+ summary: 'Get a list of emails of the current user.'
+ operationId: listEmails
+ tags:
+ - Email Management
+ security:
+ - CookieAuth: [ ]
+ - BearerTokenAuth: [ ]
+ responses:
+ '200':
+ description: 'A list of emails assigned to the current user'
+ content:
+ application/json:
+ schema:
+ $ref: '#/components/schemas/Emails'
+ '401':
+ $ref: '#/components/responses/Unauthorized'
+ '500':
+ $ref: '#/components/responses/InternalServerError'
+ post:
+ summary: 'Add a new email address to the current user.'
+ operationId: createEmail
+ tags:
+ - Email Management
+ security:
+ - CookieAuth: [ ]
+ - BearerTokenAuth: [ ]
+ requestBody:
+ content:
+ application/json:
+ schema:
+ type: object
+ properties:
+ address:
+ type: string
+ format: email
+ required:
+ - address
+ responses:
+ '201':
+ description: 'Email successfully added'
+ '400':
+ $ref: '#/components/responses/BadRequest'
+ '409':
+ $ref: '#/components/responses/Conflict'
+ '500':
+ $ref: '#/components/responses/InternalServerError'
+ /emails/{id}/set_primary:
+ post:
+ summary: 'Marks the email address as primary email'
+ operationId: setPrimaryEmail
+ tags:
+ - Email Management
+ security:
+ - CookieAuth: [ ]
+ - BearerTokenAuth: [ ]
+ parameters:
+ - name: id
+ in: path
+ description: ID of the email address
+ required: true
+ schema:
+ $ref: '#/components/schemas/UUID4'
+ responses:
+ '201':
+ description: 'Email has been set as primary'
+ '400':
+ $ref: '#/components/responses/BadRequest'
+ '401':
+ $ref: '#/components/responses/Unauthorized'
+ '500':
+ $ref: '#/components/responses/InternalServerError'
+ /emails/{id}:
+ delete:
+ summary: 'Delete an email address'
+ operationId: deleteEmail
+ tags:
+ - Email Management
+ security:
+ - CookieAuth: [ ]
+ - BearerTokenAuth: [ ]
+ parameters:
+ - name: id
+ in: path
+ description: ID of the email address
+ required: true
+ schema:
+ $ref: '#/components/schemas/UUID4'
+ responses:
+ '201':
+ description: 'Email has been deleted'
+ '401':
+ $ref: '#/components/responses/Unauthorized'
+ '409':
+ $ref: '#/components/responses/Conflict'
+ '500':
+ $ref: '#/components/responses/InternalServerError'
components:
responses:
BadRequest:
@@ -658,6 +855,13 @@ components:
description: Hanko Configuration
url: https://github.com/teamhanko/hanko/blob/main/backend/docs/Config.md
properties:
+ emails:
+ description: Controls the behavior regarding email addresses.
+ type: object
+ properties:
+ require_verification:
+ description: Require email verification after account registration and prevent signing in with unverified email addresses. Also, email addresses can only be marked as primary when they have been verified before.
+ type: boolean
password:
description: Configuration options concerning passwords
type: object
@@ -950,7 +1154,7 @@ components:
- ble
- internal
example: internal
- User:
+ GetUserResponse:
type: object
properties:
id:
@@ -983,6 +1187,114 @@ components:
type: string
format: base64url
example: Meprtysj5ZZrTlg0qiLbsZ168OtQMeGVAikVy2n1hvvG...
+ CreateUserResponse:
+ type: object
+ properties:
+ user_id:
+ description: "The ID of the newly created user"
+ allOf:
+ - $ref: '#/components/schemas/UUID4'
+ email_id:
+ description: "The ID of the newly created email address"
+ allOf:
+ - $ref: '#/components/schemas/UUID4'
+ User:
+ type: object
+ properties:
+ id:
+ description: The ID of the user
+ allOf:
+ - $ref: '#/components/schemas/UUID4'
+ email:
+ description: The email address of the user
+ type: string
+ format: email
+ created_at:
+ description: Time of creation of the the user
+ type: string
+ format: date-time
+ updated_at:
+ description: Time of last update of the user
+ type: string
+ format: date-time
+ webauthn_credentials:
+ description: List of registered Webauthn credentials
+ type: array
+ items:
+ type: object
+ properties:
+ id:
+ description: The ID of the Webauthn credential
+ type: string
+ format: base64url
+ example: Meprtysj5ZZrTlg0qiLbsZ168OtQMeGVAikVy2n1hvvG...
+ Emails:
+ type: array
+ items:
+ type: object
+ properties:
+ id:
+ description: The ID of the email address
+ allOf:
+ - $ref: '#/components/schemas/UUID4'
+ address:
+ description: The email address
+ type: string
+ format: email
+ is_verified:
+ description: Indicated the email has been verified.
+ type: boolean
+ is_primary:
+ description: Indicates it's the primary email address.
+ type: boolean
+ example:
+ - id: 5333cc5b-c7c4-48cf-8248-9c184ac72b65
+ address: john.doe@example.com
+ is_verified: true
+ is_primary: false
+ WebauthnCredentials:
+ description: 'A list of WebAuthn credentials'
+ type: array
+ items:
+ type: object
+ properties:
+ id:
+ description: The ID of the Webauthn credential
+ type: string
+ format: base64url
+ example: Meprtysj5ZZrTlg0qiLbsZ168OtQMeGVAikVy2n1hvvG...
+ name:
+ description: The name of the credential. Can be updated by the user.
+ type: string
+ required: false
+ public_key:
+ description: The public key assigned to the credential.
+ type: boolean
+ aaguid:
+ description: The AAGUID of the authenticator.
+ type: boolean
+ transports:
+ description: Transports which may be used by the authenticator.
+ type: array
+ items:
+ type: string
+ enum:
+ - usb
+ - nfc
+ - ble
+ - internal
+ created_at:
+ description: Time of creation of the credential
+ type: string
+ format: date-time
+ example:
+ - id: 5333cc5b-c7c4-48cf-8248-9c184ac72b65
+ name: "iCloud"
+ public_key: "pQECYyagASFYIBblARCP_at3cmprjzQN1lJ..."
+ aaguid: "adce0002-35bc-c60a-648b-0b25f1f05503"
+ transports:
+ - internal
+ created_at: "022-12-06T21:26:06.535106Z"
WebauthnLoginResponse:
description: 'Response after a successful login with webauthn'
type: object
diff --git a/e2e/pages/LoginPasscode.ts b/e2e/pages/LoginPasscode.ts
index c1e3e7584..5969a1f8b 100644
--- a/e2e/pages/LoginPasscode.ts
+++ b/e2e/pages/LoginPasscode.ts
@@ -17,7 +17,7 @@ export class LoginPasscode extends BasePage {
this.signInButton = page.locator("button[type=submit]", {
hasText: "Sign in",
});
- this.sendNewCodeLink = page.locator("a", {
+ this.sendNewCodeLink = page.locator("button", {
hasText: "Send new code",
});
this.headline = page.locator("h1", { hasText: "Enter passcode" });
diff --git a/e2e/pages/LoginPassword.ts b/e2e/pages/LoginPassword.ts
index 1dae39d7b..ee23dda2a 100644
--- a/e2e/pages/LoginPassword.ts
+++ b/e2e/pages/LoginPassword.ts
@@ -15,8 +15,8 @@ export class LoginPassword extends BasePage {
this.signInButton = page.locator("button[type=submit]", {
hasText: "Sign in",
});
- this.backLink = page.locator("a", { hasText: "Back" });
- this.forgotPasswordLink = page.locator("a", {
+ this.backLink = page.locator("button", { hasText: "Back" });
+ this.forgotPasswordLink = page.locator("button", {
hasText: "Forgot your password?",
});
this.headline = page.locator("h1", { hasText: "Enter password" });
diff --git a/e2e/pages/RegisterAuthenticator.ts b/e2e/pages/RegisterAuthenticator.ts
index 18ab19623..0a297060a 100644
--- a/e2e/pages/RegisterAuthenticator.ts
+++ b/e2e/pages/RegisterAuthenticator.ts
@@ -13,7 +13,7 @@ export class RegisterAuthenticator extends BasePage {
this.setUpPasskeyButton = page.locator("button[type=submit]", {
hasText: "Save a passkey",
});
- this.skipLink = page.locator("a", {
+ this.skipLink = page.locator("button", {
hasText: "Skip",
});
this.headline = page.locator("h1", { hasText: "Save a passkey" });
diff --git a/e2e/pages/RegisterConfirm.ts b/e2e/pages/RegisterConfirm.ts
index 363ac27d0..634383358 100644
--- a/e2e/pages/RegisterConfirm.ts
+++ b/e2e/pages/RegisterConfirm.ts
@@ -10,7 +10,7 @@ export class RegisterConfirm extends BasePage {
constructor(page: Page) {
super(page);
- this.backLink = page.locator("a", { hasText: "Back" });
+ this.backLink = page.locator("button", { hasText: "Back" });
this.signUpButton = page.locator("button[type=submit]", {
hasText: "Sign up",
});
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index b6f51fc7e..dc548c9ff 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -23,7 +23,7 @@ COPY ./elements ./
RUN npm run build
FROM nginx:stable-alpine
-COPY --from=build /app/elements/dist/element.hanko-auth.js /usr/share/nginx/html
+COPY --from=build /app/elements/dist/elements.js /usr/share/nginx/html
COPY --from=build /app/frontend-sdk/dist/sdk.* /usr/share/nginx/html
COPY elements/nginx/default.conf /etc/nginx/conf.d/default.conf
diff --git a/frontend/elements/README.md b/frontend/elements/README.md
index b78396055..ee9442b9f 100644
--- a/frontend/elements/README.md
+++ b/frontend/elements/README.md
@@ -1,6 +1,6 @@
-# <hanko-auth> element
+# Hanko elements
-The `` element offers a complete user interface that will bring a modern login and registration experience
+Provides web components that will bring a modern login and registration experience
to your users. It integrates the [Hanko API](https://github.com/teamhanko/hanko/blob/main/backend/README.md), a backend
that provides the underlying functionalities.
@@ -9,6 +9,7 @@ that provides the underlying functionalities.
* Registration and login flows with and without passwords
* Passkey authentication
* Passcodes, a convenient way to recover passwords and verify email addresses
+* Email, Password and Passkey management
* Customizable UI
## Installation
@@ -28,19 +29,14 @@ pnpm install @teamhanko/hanko-elements
### Script
-The web component needs to be registered first. You can control whether it should be attached to the shadow DOM or not
-using the `shadow` property. It's set to true by default, and you will be able to use the CSS parts
-to change the appearance of the component.
-
-There is currently an issue with Safari browsers, which breaks the autocompletion feature of
-input fields when the component is shadow DOM attached. So if you want to make use of the conditional UI or other
-autocompletion features you must set `shadow` to false. The disadvantage is that the CSS parts are not working anymore, and you must
-style the component by providing your own CSS properties. CSS variables will work in both cases.
+The web components need to be registered first. You can control whether they should be attached to the shadow DOM or not
+using the `shadow` property. It's set to true by default, and it's possible to make use of the [CSS shadow parts](#css-shadow-parts)
+to change the appearance of the component. [CSS variables](#css-variables) will work in both cases.
Use as a module:
```typescript
-import { register } from "@teamhanko/hanko-elements/hanko-auth"
+import { register } from "@teamhanko/hanko-elements"
register({
shadow: true, // Set to false if you don't want the web component to be attached to the shadow DOM.
@@ -51,31 +47,30 @@ register({
With a script tag via CDN:
```html
-
+
```
-### Markup
+### <hanko-auth>
+
+A web component that handles user login and user registration.
+
+#### Markup
```html
```
-Please take a look at the [Hanko API](https://github.com/teamhanko/hanko/blob/main/backend/README.md) to see how to spin up the backend.
-
-Note that we're working on Hanko Cloud, so that you don't need to run the Hanko API by yourself and all you need is to
-do is adding the `` element to your page.
-
-## Attributes
+#### Attributes
- `api` the location where the Hanko API is running.
- `lang` Currently supported values are "en" for English and "de" for German. If the value is omitted, "en" is used.
- `experimental` A space-seperated list of experimental features to be enabled. See [experimental features](#experimental-features).
-## Events
+#### Events
These events bubble up through the DOM tree.
@@ -87,66 +82,84 @@ document.addEventListener('hankoAuthSuccess', () => {
})
```
-## Demo
-
-The animation below demonstrates how user registration with passwords enabled looks like. You can set up the flow you
-like using the [Hanko API](https://github.com/teamhanko/hanko/blob/main/backend/README.md) configuration file. The registration flow also includes email
-verification via passcodes and the registration of a passkey so that the user can log in without passwords or passcodes.
-
-
-
-## UI Customization
-
-### CSS Variables
-
-CSS variables can be used to style the `hanko-auth` element to your needs. Based on preset values and provided CSS
-variables, individual elements will be styled, including color shading for different UI states (e.g. hover, focus,..).
+### <hanko-profile>
-Note that colors must be provided as individual HSL values. We'll have to be patient, unfortunately, until
-broader browser support for relative colors arrives, which would allow native CSS colors to be used.
+A web component that allows to manage emails, passwords and passkeys.
-A list of all CSS variables including default values can be found below:
+#### Markup
-```css
-hanko-auth {
- --background-color-h: 0;
- --background-color-s: 0%;
- --background-color-l: 100%;
-
- --border-radius: 3px;
- --border-style: solid;
- --border-width: 1.5px;
-
- --brand-color-h: 351;
- --brand-color-s: 100%;
- --brand-color-l: 59%;
-
- --color-h: 0;
- --color-s: 0%;
- --color-l: 0%;
-
- --container-padding: 20px;
- --container-max-width: 600px;
+```html
+
+```
- --error-color-h: 351;
- --error-color-s: 100%;
- --error-color-l: 59%;
+#### Attributes
- --font-family: sans-serif;
- --font-size: 16px;
- --font-weight: 400;
+- `api` the location where the Hanko API is running.
+- `lang` Currently supported values are "en" for English and "de" for German. If the value is omitted, "en" is used.
- --headline-font-size: 30px;
- --headline-font-weight: 700;
+## UI Customization
- --input-height: 50px;
+### CSS Variables
- --item-margin: 15px 0;
+CSS variables can be used to style the `hanko-auth` and `hanko-profile` elements to your needs. A list of all CSS
+variables including default values can be found below:
- --lightness-adjust-dark: -30%;
- --lightness-adjust-dark-light: -10%;
- --lightness-adjust-light: 10%;
- --lightness-adjust-light-dark: 30%;
+```css
+hanko-auth, hanko-profile {
+ /* Color Scheme */
+ --color: #171717
+ --color-shade-1: #8f9095
+ --color-shade-2: #e5e6ef
+
+ --brand-color: #506cf0
+ --brand-color-shade-1: #6b84fb
+ --brand-contrast-color: white
+
+ --background-color: white
+ --error-color: #e82020
+ --link-color: #506cf0
+
+ /* Font Styles */
+ --font-weight: 400
+ --font-size: 14px
+ --font-family: sans-serif
+
+ /* Border Styles */
+ --border-radius: 4px
+ --border-style: solid
+ --border-width: 1px
+
+ /* Item Styles */
+ --item-height: 34px
+ --item-margin: .5rem 0
+
+ /* Container Styles */
+ --container-padding: 0
+ --container-max-width: 600px
+
+ /* Headline Styles */
+ --headline1-font-size: 24px
+ --headline1-font-weight: 600
+ --headline1-margin: 0 0 .5rem
+
+ --headline2-font-size: 14px
+ --headline2-font-weight: 600
+ --headline2-margin: 1rem 0 .25rem
+
+ /* Divider Styles */
+ --divider-padding: 0 42px
+ --divider-display: block
+ --divider-visibility: visible
+
+ /* Link Styles */
+ --link-text-decoration: none
+ --link-text-decoration-hover: underline
+
+ /* Input Styles */
+ --input-min-width: 12em
+
+ /* Button Styles */
+ --button-min-width: max-content
}
```
@@ -215,66 +228,6 @@ autocompletion of input elements while the web component is attached to the shad
attach the component to the shadow DOM and make use of CSS parts for UI customization when the CSS variables are not
sufficient.
-### Example
-
-The example below shows how you can use CSS variables in combination with styled shadow DOM parts:
-
-```css
-hanko-auth {
- --color-h: 188;
- --color-s: 99%;
- --color-l: 38%;
-
- --brand-color-h: 315;
- --brand-color-s: 100%;
- --brand-color-l: 59%;
-
- --background-color-h: 196;
- --background-color-s: 10%;
- --background-color-l: 21%;
-
- --border-width: 1px;
- --border-radius: 5px;
-
- --font-weight: 400;
- --font-size: 16px;
- --font-family: Helvetica;
-
- --input-height: 45px;
- --item-margin: 10px;
-
- --container-max-width: 450px;
- --container-padding: 10px 20px;
-
- --headline-font-weight: 800;
- --headline-font-size: 24px;
-
- --lightness-adjust-dark: 30%;
- --lightness-adjust-dark-light: 10%;
- --lightness-adjust-light: -10%;
- --lightness-adjust-light-dark: 30%;
-}
-
-hanko-auth::part(headline),
-hanko-auth::part(input),
-hanko-auth::part(link) {
- color: hsl(33, 93%, 55%);
-}
-
-hanko-auth::part(link):hover {
- text-decoration: underline;
-}
-
-hanko-auth::part(button):hover,
-hanko-auth::part(input):focus {
- border-width: 2px;
-}
-```
-
-Result:
-
-
-
## Experimental Features
### Conditional Mediation / Autofill assisted Requests
@@ -301,7 +254,7 @@ cause the following issues:
## Frontend framework integrations
-To learn more about how to integrate the `` element into frontend frameworks, see our
+To learn more about how to integrate the Hanko elements into frontend frameworks, see our
[guides](https://docs.hanko.io/guides/frontend) in the official documentation and our
[example applications](../../examples/README.md).
diff --git a/frontend/elements/demo-ui.png b/frontend/elements/demo-ui.png
deleted file mode 100644
index 4e90e89192f3ce6a26f3ead37ab718e8095d998f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 51741
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
-
-## UI Customization
-
-### CSS Variables
-
-CSS variables can be used to style the `hanko-auth` element to your needs. Based on preset values and provided CSS
-variables, individual elements will be styled, including color shading for different UI states (e.g. hover, focus,..).
+### <hanko-profile>
-Note that colors must be provided as individual HSL values. We'll have to be patient, unfortunately, until
-broader browser support for relative colors arrives, which would allow native CSS colors to be used.
+A web component that allows to manage emails, passwords and passkeys.
-A list of all CSS variables including default values can be found below:
+#### Markup
-```css
-hanko-auth {
- --background-color-h: 0;
- --background-color-s: 0%;
- --background-color-l: 100%;
-
- --border-radius: 3px;
- --border-style: solid;
- --border-width: 1.5px;
-
- --brand-color-h: 351;
- --brand-color-s: 100%;
- --brand-color-l: 59%;
-
- --color-h: 0;
- --color-s: 0%;
- --color-l: 0%;
-
- --container-padding: 20px;
- --container-max-width: 600px;
+```html
+
-
## Experimental Features
### Conditional Mediation / Autofill assisted Requests
@@ -301,7 +254,7 @@ cause the following issues:
## Frontend framework integrations
-To learn more about how to integrate the `