Skip to content

Commit 87c132e

Browse files
simeng-lisimeng-li
authored
fix(docs): fix react SDK tutorial fragment (#600)
fix react SDK tutorial fragment and add vue tutorial
1 parent ec2f569 commit 87c132e

17 files changed

+1030
-17
lines changed

‎tutorial/build-with-logto/_integrate-sdk-react.mdx

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,32 @@
1-
import redirectUriFigure from '../../docs/sdk/assets/web-redirect-uri.png';
2-
import ConfigureRedirectUri from '../../docs/sdk/fragments/_configure-redirect-uri.mdx';
3-
import SignInFlowSummary from '../../docs/sdk/fragments/_web-sign-in-flow-summary.mdx';
4-
import HandleRedirect from '../../docs/sdk/spa/react/_handle-redirect.mdx';
1+
import GuideTip from '../../docs/sdk/spa/react/_guide-tip.mdx';
2+
import HandleAuthenticationStatus from '../../docs/sdk/spa/react/_handle-authentication-status.mdx';
53
import ImplementSignIn from '../../docs/sdk/spa/react/_implement-sign-in.mdx';
4+
import ImplementSignOut from '../../docs/sdk/spa/react/_implement-sign-out.mdx';
65
import InitClient from '../../docs/sdk/spa/react/_init-client.mdx';
76
import Installation from '../../docs/sdk/spa/react/_installation.mdx';
87

98
import TestYourIntegration from './fragments/_test-your-integration.mdx';
109

11-
### Add Logto SDK as a dependency
10+
<GuideTip />
11+
12+
### Installation
1213

1314
<Installation />
1415

1516
### Init LogtoClient
1617

1718
<InitClient />
1819

19-
### Sign-in flow
20-
21-
<SignInFlowSummary />
22-
23-
### Configure Redirect URI
20+
### Implement sign-in
2421

25-
<ConfigureRedirectUri figureSrc={redirectUriFigure} redirectUri="http://localhost:3000/callback" />
22+
<ImplementSignIn />
2623

27-
### Implement a sign-in button
24+
### Implement sign-out
2825

29-
<ImplementSignIn />
26+
<ImplementSignOut />
3027

31-
### Handle redirect
28+
### Handle authentication status
3229

33-
<HandleRedirect />
30+
<HandleAuthenticationStatus />
3431

3532
<TestYourIntegration sdk="React" />

‎tutorial/build-with-logto/_integrate-sdk-vue.mdx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import GuideTip from '../../docs/sdk/spa/vue/_guide-tip.mdx';
2+
import HandleAuthenticationStatus from '../../docs/sdk/spa/vue/_handle-authentication-status.mdx';
3+
import ImplementSignIn from '../../docs/sdk/spa/vue/_implement-sign-in.mdx';
4+
import ImplementSignOut from '../../docs/sdk/spa/vue/_implement-sign-out.mdx';
5+
import InitClient from '../../docs/sdk/spa/vue/_init-client.mdx';
6+
import Installation from '../../docs/sdk/spa/vue/_installation.mdx';
7+
8+
import TestYourIntegration from './fragments/_test-your-integration.mdx';
9+
10+
<GuideTip />
11+
12+
### Installation
13+
14+
<Installation />
15+
16+
### Init LogtoClient
17+
18+
<InitClient />
19+
20+
### Implement sign-in
21+
22+
<ImplementSignIn />
23+
24+
### Implement sign-out
25+
26+
<ImplementSignOut />
27+
28+
### Handle authentication status
29+
30+
<HandleAuthenticationStatus />
31+
32+
<TestYourIntegration sdk="Vue" />

‎tutorial/build-with-logto/generate.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,13 @@ const sdks = [
3232
appType: 'Single page app',
3333
framework: 'React',
3434
},
35+
{
36+
name: 'Vue',
37+
language: 'js',
38+
officialLink: 'https://vuejs.org/',
39+
appType: 'Single page app',
40+
framework: 'Vue',
41+
},
3542
{
3643
name: 'Vanilla JS',
3744
language: 'js',
@@ -106,14 +113,16 @@ const sdks = [
106113
{
107114
name: '.NET Core (Blazor Server)',
108115
language: 'c#',
109-
officialLink: 'https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models#blazor-server',
116+
officialLink:
117+
'https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models#blazor-server',
110118
appType: 'Traditional web',
111119
framework: '.NET Core (Blazor Server)',
112120
},
113121
{
114122
name: '.NET Core (Blazor WebAssembly)',
115123
language: 'c#',
116-
officialLink: 'https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models#blazor-webassembly',
124+
officialLink:
125+
'https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models#blazor-webassembly',
117126
appType: 'Single page app',
118127
framework: '.NET Core (Blazor WebAssembly)',
119128
},

‎tutorial/build-with-logto/generated-vue-apple.mdx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
slug: how-to-build-apple-sign-in-with-vue-and-logto
3+
authors: logto
4+
tags: [authentication, apple, vue, js, social-sign-in, sign-in, login]
5+
title: How to build Apple sign-in with Vue and Logto
6+
---
7+
8+
<!--
9+
We have to divide templates into sections because imported mdx will not show in the TOC.
10+
There's no way to customize TOC either. :-)
11+
12+
@see https://github.com/facebook/docusaurus/issues/3915
13+
-->
14+
15+
import Intro from './fragments/_intro.mdx';
16+
import CreateApplication from './fragments/_create-application.mdx';
17+
import AddSocialConnector from './fragments/_add-social-connector.mdx';
18+
import SaveYourConfiguration from './fragments/_save-your-configuration.mdx';
19+
import EnableSocialConnector from './fragments/_enable-social-connector.mdx';
20+
import TestingAndValidation from './fragments/_testing-and-validation.mdx';
21+
import IntegrateSdk from './_integrate-sdk-vue.mdx';
22+
import ConnectorGuide from './_connector-apple.mdx';
23+
24+
export const connector = 'Apple';
25+
26+
<!-- truncate -->
27+
28+
<Intro connector={connector} sdk="Vue" link="https://vuejs.org/" />
29+
30+
## Create an application in Logto
31+
32+
<CreateApplication type="Single page app" framework="Vue" />
33+
34+
## Integrate Logto SDK
35+
36+
<IntegrateSdk />
37+
38+
## Add Apple connector
39+
40+
<AddSocialConnector connector={connector} />
41+
42+
## Set up Apple Sign-in
43+
44+
<ConnectorGuide />
45+
46+
## Save your configuraiton
47+
48+
<SaveYourConfiguration connector={connector} />
49+
50+
## Enable Apple connector in Sign-in Experience
51+
52+
<EnableSocialConnector connector={connector} />
53+
54+
## Testing and Validation
55+
56+
<TestingAndValidation connector={connector} sdk="Vue" />
57+
58+
## Further readings
59+
60+
[⚔️ Protect your API](/docs/recipes/protect-your-api/) For native and single page apps, you'll need to call one or more API endpoints to retrieve and update data.<br/>
61+
Learn more about identifying who's who and keeping your API secure.
62+
63+
[🧑‍🚀 Manage users](/docs/recipes/manage-users/) We know you care about user management and activities, as we also do.<br/>
64+
Learn more about how to know your users and see the figures like DAU and MAU graphically.
65+
66+
[🌐 Localization](/docs/recipes/customize-sie/localized-language) From one regional business to a global corporate, the willingness to offer the best user experience won't change.<br/>
67+
You can change current language phrases or add a new language without friction.
68+
69+
[🧑‍🎓 Customer IAM series](/blog/tags/ciam) Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

‎tutorial/build-with-logto/generated-vue-aws-ses.mdx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
slug: how-to-build-aws-ses-sign-in-with-vue-and-logto
3+
authors: logto
4+
tags: [authentication, aws-ses, vue, js, passwordless-sign-in, sign-in, login]
5+
title: How to build AWS SES Email passwordless sign-in with Vue and Logto
6+
---
7+
8+
<!--
9+
We have to divide templates into sections because imported mdx will not show in the TOC.
10+
There's no way to customize TOC either. :-)
11+
12+
@see https://github.com/facebook/docusaurus/issues/3915
13+
-->
14+
15+
import Intro from './fragments/_intro.mdx';
16+
import CreateApplication from './fragments/_create-application.mdx';
17+
import AddPasswordlessConnector from './fragments/_add-passwordless-connector.mdx';
18+
import SaveYourConfiguration from './fragments/_save-your-configuration.mdx';
19+
import EnablePasswordlessConnector from './fragments/_enable-passwordless-connector.mdx';
20+
import TestingAndValidation from './fragments/_testing-and-validation.mdx';
21+
import IntegrateSdk from './_integrate-sdk-vue.mdx';
22+
import ConnectorGuide from './_connector-aws-ses.mdx';
23+
24+
export const connector = 'AWS SES';
25+
26+
<!-- truncate -->
27+
28+
<Intro connector={connector} sdk="Vue" link="https://vuejs.org/" />
29+
30+
## Create an application in Logto
31+
32+
<CreateApplication type="Single page app" framework="Vue" />
33+
34+
## Integrate Logto SDK
35+
36+
<IntegrateSdk />
37+
38+
## Add AWS SES connector
39+
40+
<AddPasswordlessConnector connector={connector} connectorType="Email" />
41+
42+
## Set up AWS SES email connector
43+
44+
<ConnectorGuide />
45+
46+
## Save your configuraiton
47+
48+
<SaveYourConfiguration connector={connector} />
49+
50+
## Enable AWS SES connector in Sign-in Experience
51+
52+
<EnablePasswordlessConnector
53+
connectorType="Email"
54+
passwordlessSignUpIdentifier="Email address"
55+
/>
56+
57+
## Testing and Validation
58+
59+
<TestingAndValidation connector={connector} sdk="Vue" />
60+
61+
## Further readings
62+
63+
[⚔️ Protect your API](/docs/recipes/protect-your-api/) For native and single page apps, you'll need to call one or more API endpoints to retrieve and update data.<br/>
64+
Learn more about identifying who's who and keeping your API secure.
65+
66+
[🧑‍🚀 Manage users](/docs/recipes/manage-users/) We know you care about user management and activities, as we also do.<br/>
67+
Learn more about how to know your users and see the figures like DAU and MAU graphically.
68+
69+
[🌐 Localization](/docs/recipes/customize-sie/localized-language) From one regional business to a global corporate, the willingness to offer the best user experience won't change.<br/>
70+
You can change current language phrases or add a new language without friction.
71+
72+
[🧑‍🎓 Customer IAM series](/blog/tags/ciam) Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

‎tutorial/build-with-logto/generated-vue-azure-ad.mdx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
slug: how-to-build-azure-ad-sign-in-with-vue-and-logto
3+
authors: logto
4+
tags: [authentication, azure-ad, vue, js, social-sign-in, sign-in, login]
5+
title: How to build Azure AD sign-in with Vue and Logto
6+
---
7+
8+
<!--
9+
We have to divide templates into sections because imported mdx will not show in the TOC.
10+
There's no way to customize TOC either. :-)
11+
12+
@see https://github.com/facebook/docusaurus/issues/3915
13+
-->
14+
15+
import Intro from './fragments/_intro.mdx';
16+
import CreateApplication from './fragments/_create-application.mdx';
17+
import AddSocialConnector from './fragments/_add-social-connector.mdx';
18+
import SaveYourConfiguration from './fragments/_save-your-configuration.mdx';
19+
import EnableSocialConnector from './fragments/_enable-social-connector.mdx';
20+
import TestingAndValidation from './fragments/_testing-and-validation.mdx';
21+
import IntegrateSdk from './_integrate-sdk-vue.mdx';
22+
import ConnectorGuide from './_connector-azure-ad.mdx';
23+
24+
export const connector = 'Azure AD';
25+
26+
<!-- truncate -->
27+
28+
<Intro connector={connector} sdk="Vue" link="https://vuejs.org/" />
29+
30+
## Create an application in Logto
31+
32+
<CreateApplication type="Single page app" framework="Vue" />
33+
34+
## Integrate Logto SDK
35+
36+
<IntegrateSdk />
37+
38+
## Add Azure AD connector
39+
40+
<AddSocialConnector connector={connector} />
41+
42+
## Set up Azure AD
43+
44+
<ConnectorGuide />
45+
46+
## Save your configuraiton
47+
48+
<SaveYourConfiguration connector={connector} />
49+
50+
## Enable Azure AD connector in Sign-in Experience
51+
52+
<EnableSocialConnector connector={connector} />
53+
54+
## Testing and Validation
55+
56+
<TestingAndValidation connector={connector} sdk="Vue" />
57+
58+
## Further readings
59+
60+
[⚔️ Protect your API](/docs/recipes/protect-your-api/) For native and single page apps, you'll need to call one or more API endpoints to retrieve and update data.<br/>
61+
Learn more about identifying who's who and keeping your API secure.
62+
63+
[🧑‍🚀 Manage users](/docs/recipes/manage-users/) We know you care about user management and activities, as we also do.<br/>
64+
Learn more about how to know your users and see the figures like DAU and MAU graphically.
65+
66+
[🌐 Localization](/docs/recipes/customize-sie/localized-language) From one regional business to a global corporate, the willingness to offer the best user experience won't change.<br/>
67+
You can change current language phrases or add a new language without friction.
68+
69+
[🧑‍🎓 Customer IAM series](/blog/tags/ciam) Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

‎tutorial/build-with-logto/generated-vue-discord.mdx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
slug: how-to-build-discord-sign-in-with-vue-and-logto
3+
authors: logto
4+
tags: [authentication, discord, vue, js, social-sign-in, sign-in, login]
5+
title: How to build Discord sign-in with Vue and Logto
6+
---
7+
8+
<!--
9+
We have to divide templates into sections because imported mdx will not show in the TOC.
10+
There's no way to customize TOC either. :-)
11+
12+
@see https://github.com/facebook/docusaurus/issues/3915
13+
-->
14+
15+
import Intro from './fragments/_intro.mdx';
16+
import CreateApplication from './fragments/_create-application.mdx';
17+
import AddSocialConnector from './fragments/_add-social-connector.mdx';
18+
import SaveYourConfiguration from './fragments/_save-your-configuration.mdx';
19+
import EnableSocialConnector from './fragments/_enable-social-connector.mdx';
20+
import TestingAndValidation from './fragments/_testing-and-validation.mdx';
21+
import IntegrateSdk from './_integrate-sdk-vue.mdx';
22+
import ConnectorGuide from './_connector-discord.mdx';
23+
24+
export const connector = 'Discord';
25+
26+
<!-- truncate -->
27+
28+
<Intro connector={connector} sdk="Vue" link="https://vuejs.org/" />
29+
30+
## Create an application in Logto
31+
32+
<CreateApplication type="Single page app" framework="Vue" />
33+
34+
## Integrate Logto SDK
35+
36+
<IntegrateSdk />
37+
38+
## Add Discord connector
39+
40+
<AddSocialConnector connector={connector} />
41+
42+
## Set up Discord OAuth app
43+
44+
<ConnectorGuide />
45+
46+
## Save your configuraiton
47+
48+
<SaveYourConfiguration connector={connector} />
49+
50+
## Enable Discord connector in Sign-in Experience
51+
52+
<EnableSocialConnector connector={connector} />
53+
54+
## Testing and Validation
55+
56+
<TestingAndValidation connector={connector} sdk="Vue" />
57+
58+
## Further readings
59+
60+
[⚔️ Protect your API](/docs/recipes/protect-your-api/) For native and single page apps, you'll need to call one or more API endpoints to retrieve and update data.<br/>
61+
Learn more about identifying who's who and keeping your API secure.
62+
63+
[🧑‍🚀 Manage users](/docs/recipes/manage-users/) We know you care about user management and activities, as we also do.<br/>
64+
Learn more about how to know your users and see the figures like DAU and MAU graphically.
65+
66+
[🌐 Localization](/docs/recipes/customize-sie/localized-language) From one regional business to a global corporate, the willingness to offer the best user experience won't change.<br/>
67+
You can change current language phrases or add a new language without friction.
68+
69+
[🧑‍🎓 Customer IAM series](/blog/tags/ciam) Our serial blog posts about Customer (or Consumer) Identity and Access Management, from 101 to advanced topics and beyond.

0 commit comments

Comments
 (0)