From 80293cdd2744a8163a595b7359a411da51f5dbe1 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Tue, 29 Oct 2024 14:03:28 +0800 Subject: [PATCH 1/3] chore: update readme file --- README.md | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 62 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f5cc7d5..459b371 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,63 @@ -# experience-samples +

+ + + + + Logto logo + + +

-Logto sign-in experience sample codes +[![discord](https://img.shields.io/discord/965845662535147551?color=5865f2&label=discord)](https://discord.gg/vRvwuwgpVX) +[![cloud](https://img.shields.io/badge/cloud-available-7958ff)](https://cloud.logto.io/?sign_up=true&utm_source=github&utm_medium=repo_logto) + +# Logto sign-in experience UI samples + +Logto[^info] is an open-source Identity and Access Management (IAM) platform designed to streamline Customer Identity and Access Management (CIAM) and Workforce Identity Management. With Single Sign-On (SSO), OIDC-based authentication, and Multi-Tenant SaaS capabilities, Logto offers a scalable, secure, and developer-friendly way to manage authentication for modern web and mobile application. + +This monorepo contains a collection of sign-in experience UI sample projects, which demonstrate how to develop a custom sign-in experience for Logto, with the help of [Logto Experience API](https://bump.sh/logto/doc/logto-experience-api). + +## Samples + +| Name | Description | +| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| [Password sign-in sample](./packages/sign-in-with-password/) | A sample of using username and password to sign in. | +| [Password sign-up sample](./packages/sign-up-with-password/) | A sample of using username and password to register a new account. | +| [Verification code sign-in sample](./packages/sign-in-with-verification-code/) | A sample of using email and verification code to sign in. | +| [Verification code sign-up sample](./packages/sign-up-with-verification-code/) | A sample of using email and verification code to register a new account. | +| Social sign-in sample (working in progress...) | A sample of using social connector to sign-in. | +| Enterprise SSO sign-in (working in progress...) | A sample of using enterprise SSO connector to sign-in. | +| Sign-in and bind MFA (Working in progress...) | A sample of signing-in and binding MFA. | +| Sign-in with MFA verification (Working in progress...) | A sample of signing-in with MFA verification (TOTP, WebAuthn, etc.) | +| Sign-in and fulfill profile (Working in progress...) | A sample of signing-in and fulfilling additional user profile info. | +| Sign-up and fulfill profile (Working in progress...) | A sample of signing-up and fulfilling additional user profile info. | +| Forgot password (Working in progress...) | A sample of forgot password flow. | + +We'll keep adding more samples to this collection. If you have any ideas or requests, please feel free to [open an issue](https://github.com/logto-io/experience-samples/issues/new/choose) + +## Deploy to Logto Cloud + +You can build any of the individual sample projects and deploy to your Logto Cloud instance. Here is how you can do it: + +1. Clone the repository +2. Go to the sample project you want to deploy. For example, `cd packages/sign-in-with-password` +3. Install node dependencies with `pnpm install` (recommended) or `npm install`. +4. Build the project with `pnpm build` (recommended) or `npm run build`. This will generate a `dist` folder with the built assets. +5. Sign in to your Logto Cloud account and create a Machine-to-Machine (M2M) application. Copy the `App ID` and `App secret` from the application settings. +6. Create a `.env` file in the sample project folder or root folder with the following content: + + ```env + LOGTO_ENDPOINT=https://.logto.app/ + LOGTO_AUTH=: + LOGTO_PATH=/experience-samples/packages/sign-in-with-password/dist + LOGTO_RESOURCE=https://.logto.app/api + ``` +7. Run `npx logto-tunnel deploy` to deploy the sample custom experience to your Logto Cloud instance, and replace the default Logto sign-in experience. Refer to the [Logto tunnel documentation](https://docs.logto.io/docs/references/tunnel-cli/deploy/) for more details. + +## Resources +- [🏠 Logto main repo](https://github.com/logto-io/logto) +- [📚 Logto docs](https://docs.logto.io/?utm_source=github&utm_medium=repo_logto) +- [📝 Logto blog](https://blog.logto.io/?utm_source=github&utm_medium=repo_logto) +- [🔗 Logto Experience API](https://bump.sh/logto/doc/logto-experience-api/?utm_source=github&utm_medium=repo_logto) + +[^info]: Designed by Silverhand Inc. From da59c2e8e4991b09d1c7596a79fce9aee2dabad4 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Tue, 29 Oct 2024 21:23:17 +0800 Subject: [PATCH 2/3] chore: update README Co-authored-by: Gao Sun --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 459b371..0197332 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ [![discord](https://img.shields.io/discord/965845662535147551?color=5865f2&label=discord)](https://discord.gg/vRvwuwgpVX) [![cloud](https://img.shields.io/badge/cloud-available-7958ff)](https://cloud.logto.io/?sign_up=true&utm_source=github&utm_medium=repo_logto) -# Logto sign-in experience UI samples +# Logto sign-in experience custom UI samples Logto[^info] is an open-source Identity and Access Management (IAM) platform designed to streamline Customer Identity and Access Management (CIAM) and Workforce Identity Management. With Single Sign-On (SSO), OIDC-based authentication, and Multi-Tenant SaaS capabilities, Logto offers a scalable, secure, and developer-friendly way to manage authentication for modern web and mobile application. From 0af80a084899d059b7411b63986f8779dec8fecf Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Tue, 29 Oct 2024 22:24:11 +0800 Subject: [PATCH 3/3] chore: update per comment --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0197332..663077a 100644 --- a/README.md +++ b/README.md @@ -11,13 +11,11 @@ [![discord](https://img.shields.io/discord/965845662535147551?color=5865f2&label=discord)](https://discord.gg/vRvwuwgpVX) [![cloud](https://img.shields.io/badge/cloud-available-7958ff)](https://cloud.logto.io/?sign_up=true&utm_source=github&utm_medium=repo_logto) -# Logto sign-in experience custom UI samples +# The better identity infrastructure for developers -Logto[^info] is an open-source Identity and Access Management (IAM) platform designed to streamline Customer Identity and Access Management (CIAM) and Workforce Identity Management. With Single Sign-On (SSO), OIDC-based authentication, and Multi-Tenant SaaS capabilities, Logto offers a scalable, secure, and developer-friendly way to manage authentication for modern web and mobile application. +Every app needs authentication and authorization. Logto[^info] is an open-source Auth0 alternative designed for modern apps and SaaS products. -This monorepo contains a collection of sign-in experience UI sample projects, which demonstrate how to develop a custom sign-in experience for Logto, with the help of [Logto Experience API](https://bump.sh/logto/doc/logto-experience-api). - -## Samples +## Logto sign-in experience custom UI samples | Name | Description | | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |