From 8c23c819b12e0bde3bf508f0a91050dac0efc804 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Mon, 1 Jul 2024 21:30:10 +0800 Subject: [PATCH] refactor(console): update vanilla js integration guide --- .../assets/docs/guides/spa-vanilla/README.mdx | 173 +++++++++--------- 1 file changed, 83 insertions(+), 90 deletions(-) diff --git a/packages/console/src/assets/docs/guides/spa-vanilla/README.mdx b/packages/console/src/assets/docs/guides/spa-vanilla/README.mdx index eab0facc9d5d..3efd75ca4102 100644 --- a/packages/console/src/assets/docs/guides/spa-vanilla/README.mdx +++ b/packages/console/src/assets/docs/guides/spa-vanilla/README.mdx @@ -5,6 +5,9 @@ import InlineNotification from '@/ds-components/InlineNotification'; import Steps from '@/mdx-components/Steps'; import Step from '@/mdx-components/Step'; +import Checkpoint from '../../fragments/_checkpoint.md'; +import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx'; + - + ```bash -yarn add @logto/browser +pnpm add @logto/browser ``` - + ```bash -pnpm add @logto/browser +yarn add @logto/browser ``` + + + +```bash + + +``` @@ -40,7 +52,7 @@ pnpm add @logto/browser Import and init `LogtoClient` with configs: - + {`import LogtoClient from '@logto/browser'; const logtoClient = new LogtoClient({ @@ -51,116 +63,97 @@ const logtoClient = new LogtoClient({ - - - - In the following steps, we assume your app is running on http://localhost:3000. - - -### Configure Redirect URI - -First, let’s enter your redirect URI. E.g. `http://localhost:3000/callback`. - - - -### Implement a sign-in button - -Go back to your IDE/editor, use the following code to implement the sign-in button: - - - {``} - - -### Handle redirect - -We're almost there! In the last step, we use `http://localhost:3000/callback` as the Redirect URI, and now we need to handle it properly. + -Insert the code below in your `/callback` route: - -```ts -await logtoClient.handleSignInCallback(window.location.href); - -if (!logtoClient.isAuthenticated) { - // Handle failed sign-in - alert('Failed to sign in'); - return; -} - -// Handle successful sign-in. E.g. redirect to home page. -window.location.assign('http://localhost:3000/'); -``` - -Now you can test the sign-in flow. + - + -Calling `.signOut()` will clear all the Logto data in memory and localStorage if they exist. - -After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:3000` as the Post Sign-out URI below, and use it as the parameter when calling `.signOut()`. +There are still things to do after the user is redirected back to your application from Logto. Let's handle it properly. - +```ts title="pages/Callback.js" +const callbackHandler = async (logtoClient) => { + await logtoClient.handleSignInCallback(window.location.href); -### Implement a sign-out button + if (!logtoClient.isAuthenticated) { + // Handle failed sign-in + alert('Failed to sign in'); + return; + } - - {``} - + // Handle successful sign-in + window.location.assign('/'); +}; +``` - - -In Logto SDK, generally we can use `logtoClient.isAuthenticated` to check the authentication status, if the user is signed in, the value will be `true`, otherwise, the value will be `false`. + -In your vanilla JS app, you can use the `isAuthenticated` status to programmatically show and hide the sign-in and sign-out buttons. Let's see how to do it. +### Configure redirect URIs -```ts -const redirectUrl = 'http://localhost:3000/callback'; -const baseUrl = 'http://localhost:3000'; + + {`const isAuthenticated = await logtoClient.isAuthenticated(); -// Conditional rendering of sign-in and sign-out buttons -const isAuthenticated = await logtoClient.isAuthenticated(); - -// Assuming there's a div with id 'container' in your HTML -const container = document.querySelector('#container'); - -const onClickSignIn = () => logtoClient.signIn(redirectUrl); -const onClickSignOut = () => logtoClient.signOut(baseUrl); +const onClickSignIn = () => { + logtoClient.signIn('${props.redirectUris[0] ?? 'http://localhost:3000/callback'}'); +}; +const onClickSignOut = () => { + logtoClient.signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:3000'}'); +}; const button = document.createElement('button'); button.innerHTML = isAuthenticated ? 'Sign Out' : 'Sign In'; button.addEventListener('click', isAuthenticated ? onClickSignOut : onClickSignIn); -container.append(button); -``` +document.body.appendChild(button);`} + + +Calling `.signOut()` will clear all the Logto data in memory and localStorage if they exist. -Now, you can test your application: + -1. Run your application, you will see the sign-in button. -2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page. -3. After you signed in, you will be redirected back to your application and see user ID and the sign-out button. -4. Click the sign-out button to sign-out. + + + + +To display the user's information, you can use the `logtoClient.getIdTokenClaims()` method. For example, in your Home page: + +```js title="pages/Home.js" +const userInfo = await logtoClient.getIdTokenClaims(); + +// Generate display table for ID token claims +const table = document.createElement('table'); +const thead = document.createElement('thead'); +const tr = document.createElement('tr'); +const thName = document.createElement('th'); +const thValue = document.createElement('th'); +thName.innerHTML = 'Name'; +thValue.innerHTML = 'Value'; +tr.append(thName, thValue); +thead.append(tr); +table.append(thead); + +const tbody = document.createElement('tbody'); + +for (const [key, value] of Object.entries(userInfo)) { + const tr = document.createElement('tr'); + const tdName = document.createElement('td'); + const tdValue = document.createElement('td'); + tdName.innerHTML = key; + tdValue.innerHTML = typeof value === 'string' ? value : JSON.stringify(value); + tr.append(tdName, tdValue); + tbody.append(tr); +} + +table.append(tbody); +```