feat(console): add webflow integration guide (#5832)

packages/console/src/assets/docs/guides/index.ts

@@ -15,6 +15,7 @@ import spaAngular from './spa-angular/index';
 import spaReact from './spa-react/index';
 import spaVanilla from './spa-vanilla/index';
 import spaVue from './spa-vue/index';
+import spaWebflow from './spa-webflow/index';
 import thirdPartyOidc from './third-party-oidc/index';
 import { type Guide } from './types';
 import webDotnetCore from './web-dotnet-core/index';
@@ -162,6 +163,13 @@ const guides: Readonly<Guide[]> = Object.freeze([
     Component: lazy(async () => import('./web-php/README.mdx')),
     metadata: webPhp,
   },
+  {
+    order: 2.1,
+    id: 'spa-webflow',
+    Logo: lazy(async () => import('./spa-webflow/logo.svg')),
+    Component: lazy(async () => import('./spa-webflow/README.mdx')),
+    metadata: spaWebflow,
+  },
   {
     order: 3,
     id: 'web-python',

packages/console/src/assets/docs/guides/spa-webflow/README.mdx

@@ -0,0 +1,138 @@
+import UriInputField from '@/mdx-components/UriInputField';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+import InlineNotification from '@/ds-components/InlineNotification';
+import Steps from '@/mdx-components/Steps';
+import Step from '@/mdx-components/Step';
+
+<Steps>
+
+<Step title="Preparation">
+
+### Prerequisits:
+
+1. Integrating Logto with Webflow requires the "Custom code" feature of Webflow, which requires at least the "Basic" plan.
+2. A Webflow site, either use an existing site or create a new one.
+
+</Step>
+
+<Step title="Init LogtoClient">
+
+In this step, we'll add global-level custom code to your Webflow site. Since NPM is not supported in Webflow, we'll use the [jsdelivr.com](https://www.jsdelivr.com/) CDN service to import the Logto SDK.
+
+Open the "Site settings" page, and navigate to the "Custom code" section. Add the following code to the "Head code" section.
+
+<pre>
+  <code className="language-html">
+    {`<script type="module">
+  // Import \`@logto/browser\` SDK from the jsdelivr CDN
+  import LogtoClient from 'https://esm.run/@logto/browser';
+
+  // Assign the \`logtoClient\` instance to window object,
+  // enabling global usage in other pages
+  window.logtoClient = new LogtoClient({
+    endpoint: '${props.endpoint}',
+    appId: '${props.app.id}',
+  });
+</script>`}
+  </code>
+</pre>
+
+</Step>
+
+<Step
+  title="Implement sign-in"
+  subtitle="3 steps"
+>
+
+<InlineNotification>
+  In the following steps, we assume your Webflow site is running on <code>https://your-awesome-site.webflow.io</code>.
+</InlineNotification>
+
+### Configure Redirect URI
+
+First, let’s enter your redirect URI. E.g. `https://your-awesome-site.webflow.io/callback`.
+
+<UriInputField name="redirectUris" />
+
+### Implement a sign-in button
+
+Return to your Webflow designer, drag and drop a "Sign in" button to the home page, and assign it an ID “sign-in” for later reference using `getElementById()`.
+
+<pre>
+  <code className="language-html">
+    {`<script type="module">
+  const signInButton = document.getElementById('sign-in');
+  const onClickSignIn = () => logtoClient.signIn('${props.redirectUris[0] ?? 'https://your-awesome-site.webflow.io/callback'}');
+  signInButton.addEventListener('click', onClickSignIn);
+</script>`}
+  </code>
+</pre>
+
+### Handle redirect
+
+<p>We're almost there! In the last step, we use <code>{`${props.redirectUris[0] ?? 'https://your-awesome-site.webflow.io/callback'}`}</code> as the Redirect URI, and now we need to handle it properly.</p>
+
+First let's create a "Callback" page in Webflow, and simply put some static text "Redirecting..." on it. Then add the following page-level custom code to "Callback" page.
+
+```html
+<script type="module">
+  (async () => {
+    // Handle sign-in callback logic by calling the SDK method
+    await logtoClient.handleSignInCallback(window.location.href);
+
+    // Redirect back to the home page when the handling is done
+    window.location.assign('https://your-awesome-site.webflow.io');
+  })();
+</script>
+```
+
+</Step>
+
+<Step title="Implement sign-out">
+
+After signing out, it'll be great to redirect user back to your website. Let's add `https://your-awesome-site.webflow.io` as the Post Sign-out URI below, and use it as the parameter when calling `.signOut()`.
+
+<UriInputField name="postLogoutRedirectUris" />
+
+### Implement a sign-out button
+
+Return to the Webflow designer, and add a “Sign out” button on your home page. Similarly, assign an ID “sign-out” to the button, and add the following code to the page-level custom code.
+
+<pre>
+  <code className="language-js">
+    {`const signOutButton = document.getElementById('sign-out');
+const onClickSignOut = () => logtoClient.signOut('${props.postLogoutRedirectUris[0] ?? 'https://your-awesome-site.webflow.io'}');
+signOutButton.addEventListener('click', onClickSignOut);`}
+  </code>
+</pre>
+
+</Step>
+
+<Step title="Handle authentication status">
+
+In Logto SDK, generally we can use `logtoClient.isAuthenticated()` method to check the authentication status, if the user is signed in, the value will be `true`; otherwise, it will be `false`.
+
+In your Webflow site, you can also use it to programmatically show and hide the sign-in and sign-out buttons. Apply the following custom code to adjust button CSS accordingly.
+
+```js
+const isAuthenticated = await logtoClient.isAuthenticated();
+
+signInButton.style.display = isAuthenticated ? 'none' : 'block';
+signOutButton.style.display = isAuthenticated ? 'block' : 'none';
+```
+
+</Step>
+
+<Step title="Checkpoint: Test your application">
+
+Now, test your Webflow site:
+
+1. Deploy and visit your site URL, the sign-in button should be visible.
+2. Click the sign-in button, the SDK will initiate the sign-in process, redirecting you to the Logto sign-in page.
+3. After signing in, you will be redirected back to your site, seeing the username and the sign-out button.
+4. Click the sign-out button to sign-out.
+
+</Step>
+
+</Steps>

packages/console/src/assets/docs/guides/spa-webflow/config.json

@@ -0,0 +1,3 @@
+{
+  "order": 2.1
+}

packages/console/src/assets/docs/guides/spa-webflow/index.ts

@@ -0,0 +1,11 @@
+import { ApplicationType } from '@logto/schemas';
+
+import { type GuideMetadata } from '../types';
+
+const metadata: Readonly<GuideMetadata> = Object.freeze({
+  name: 'Webflow',
+  description: 'Webflow is a SaaS platform for website building and hosting.',
+  target: ApplicationType.SPA,
+});
+
+export default metadata;

packages/console/src/assets/docs/guides/spa-webflow/logo.svg

@@ -0,0 +1,10 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10804_21263)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.1921 9.81543L32.0531 37.4555H18.7727L24.6898 26.0003H24.4244C19.5428 32.3372 12.2594 36.5088 1.88159 37.4555V26.1589C1.88159 26.1589 8.5205 25.7667 12.4233 21.6634H1.88159V9.81565H13.7294V19.5603L13.9953 19.5592L18.8367 9.81565H27.7969V19.4985L28.0628 19.4981L33.0858 9.81543H46.1921Z" fill="#146EF5"/>
+</g>
+<defs>
+<clipPath id="clip0_10804_21263">
+<rect width="44" height="27.7895" fill="white" transform="translate(2 10)"/>
+</clipPath>
+</defs>
+</svg>