-
-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
…s-readme-docs chore: add readme files
- Loading branch information
Showing
4 changed files
with
273 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,33 @@ | ||
| # Logto JS SDKs | ||
| <p align="center"> | ||
| <a href="https://logto.io" target="_blank" align="center" alt="Logto Logo"> | ||
| <img src="./logo.png" width="100"> | ||
| </a> | ||
| <br/> | ||
| <span><i><a href="https://logto.io" target="_blank">Logto</a> helps you quickly focus on everything after signing in.</i></span> | ||
| </p> | ||
|
|
||
| # Logto JavaScript SDKs | ||
|
|
||
| The monorepo for SDKs and working samples written in JavaScript (Well, mostly in TypeScript). | ||
|
|
||
| ## Table of Contents | ||
|
|
||
| Please check out the sub-pages for more details: | ||
|
|
||
| - [React SDK](https://github.com/logto-io/js/tree/master/packages/react) | ||
| - [Vue SDK](https://github.com/logto-io/js/tree/master/packages/vue) | ||
|
|
||
| ## Products | ||
|
|
||
| | Name | Description | | ||
| |---|---| | ||
| | js | Logto JavaScript core | | ||
| | browser | Logto browser foundation SDK | | ||
| | react | Logto React SDK built on top of browser foundations | | ||
| | vue | Logto Vue SDK built on top of browser foundations | | ||
|
|
||
| ## Resources | ||
|
|
||
| [](https://logto.io/) | ||
| [](https://docs.logto.io/docs/sdk/swift/) | ||
| [](https://discord.gg/UEPaF3j5e6) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| # Logto React SDK | ||
| [](https://www.npmjs.com/package/@logto/react) | ||
| [](https://github.com/logto-io/js/actions/workflows/main.yml) | ||
| [](https://app.codecov.io/gh/logto-io/js?branch=master) | ||
|
|
||
| The Logto React SDK written in TypeScript. Check out our [integration guide](https://docs.logto.io/integrate-sdk/react) or [docs](https://docs.logto.io/sdk/react) for more information. | ||
|
|
||
| We also provide [集成指南](https://docs.logto.io/zh-cn/integrate-sdk/react) and [文档](https://docs.logto.io/zh-cn/sdk/react) in Simplified Chinese. | ||
|
|
||
| ## Installation | ||
|
|
||
| ### Using npm | ||
|
|
||
| ```bash | ||
| npm install @logto/react | ||
| ``` | ||
|
|
||
| ### Using yarn | ||
|
|
||
| ```bash | ||
| yarn add @logto/react | ||
| ``` | ||
|
|
||
| ### Using pnpm | ||
|
|
||
| ```bash | ||
| pnpm install @logto/react | ||
| ``` | ||
|
|
||
| ### Using CDN | ||
|
|
||
| ```bash | ||
| <script src="https://logto.io/js/logto-sdk-react/0.1.0/logto-sdk-react.production.js" /> | ||
| ``` | ||
|
|
||
| ## Get Started | ||
|
|
||
| A sample project with the following code snippets can be found at [React Sample](https://github.com/logto-io/js/tree/master/packages/react-sample) | ||
|
|
||
| Check out the source code and try it yourself. (We use [pnpm](https://pnpm.io/) for package management) | ||
|
|
||
| ```bash | ||
| pnpm i && pnpm start | ||
| ``` | ||
|
|
||
| ### Initiate LogtoClient | ||
|
|
||
| ```tsx | ||
| import { LogtoProvider, LogtoConfig } from '@logto/react'; | ||
|
|
||
| const App = () => { | ||
| const config: LogtoConfig = { | ||
| clientId: 'foo', | ||
| endpoint: 'https://your-endpoint-domain.com' | ||
| }; | ||
|
|
||
| return ( | ||
| <BrowserRouter> | ||
| <LogtoProvider config={config}> | ||
| <Routes> | ||
| <Route path="/" element={<Home />} /> | ||
| <Route path="/callback" element={<Callback />} /> | ||
| <Route | ||
| path="/protected-resource" | ||
| element={ | ||
| <RequireAuth> | ||
| <ProtectedResource /> | ||
| </RequireAuth> | ||
| } | ||
| /> | ||
| </Routes> | ||
| </LogtoProvider> | ||
| </BrowserRouter> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ### Setup your sign-in | ||
|
|
||
| ```tsx | ||
| import { useLogto } from '@logto/react'; | ||
|
|
||
| const SignInButton = () => { | ||
| const { signIn } = useLogto(); | ||
| const redirectUrl = window.location.origin + '/callback'; | ||
|
|
||
| return <button onClick={() => signIn(redirectUrl)}>Sign In</button>; | ||
| }; | ||
|
|
||
| export default SignInButton; | ||
| ``` | ||
|
|
||
| ### Retrieve Auth Status | ||
|
|
||
| ```tsx | ||
| import { useLogto } from '@logto/react'; | ||
|
|
||
| const App = () => { | ||
| const { isAuthenticated, signIn } = useLogto(); | ||
|
|
||
| if !(isAuthenticated) { | ||
| return <SignInButton /> | ||
| } | ||
|
|
||
| return <> | ||
| <AppContent /> | ||
| <SignOutButton /> | ||
| </> | ||
| }; | ||
| ``` | ||
|
|
||
| ### Sign out | ||
|
|
||
| ```tsx | ||
| import React from 'react'; | ||
| import { useLogto } from '@logto/react'; | ||
|
|
||
| const SignOutButton = () => { | ||
| const { signOut } = useLogto(); | ||
| const postLogoutRedirectUri = window.location.origin; | ||
|
|
||
| return <button onClick={() => signOut(postLogoutRedirectUri)}>Sign out</button>; | ||
| }; | ||
|
|
||
| export default SignOutButton; | ||
| ``` | ||
|
|
||
| ## Resources | ||
|
|
||
| [](https://logto.io/) | ||
| [](https://docs.logto.io/docs/sdk/swift/) | ||
| [](https://discord.gg/UEPaF3j5e6) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| # Logto Vue SDK | ||
| [](https://www.npmjs.com/package/@logto/vue) | ||
| [](https://github.com/logto-io/js/actions/workflows/main.yml) | ||
| [](https://app.codecov.io/gh/logto-io/js?branch=master) | ||
|
|
||
| The Logto Vue SDK written in TypeScript. Check out our [integration guide](https://docs.logto.io/integrate-sdk/vue) or [docs](https://docs.logto.io/sdk/vue) for more information. | ||
|
|
||
| We also provide [集成指南](https://docs.logto.io/zh-cn/integrate-sdk/vue) and [文档](https://docs.logto.io/zh-cn/sdk/vue) in Simplified Chinese. | ||
|
|
||
| ## Installation | ||
|
|
||
| ### Using npm | ||
|
|
||
| ```bash | ||
| npm install @logto/vue | ||
| ``` | ||
|
|
||
| ### Using yarn | ||
|
|
||
| ```bash | ||
| yarn add @logto/vue | ||
| ``` | ||
|
|
||
| ### Using pnpm | ||
|
|
||
| ```bash | ||
| pnpm install @logto/vue | ||
| ``` | ||
|
|
||
| ### Using CDN | ||
|
|
||
| ```bash | ||
| <script src="https://logto.io/js/logto-sdk-vue/0.1.0/logto-sdk-vue.production.js" /> | ||
| ``` | ||
|
|
||
| ## Get Started | ||
|
|
||
| A sample project with the following code snippets can be found at [Vue Sample](https://github.com/logto-io/js/tree/master/packages/vue-sample) | ||
|
|
||
| Check out the source code and try it yourself. (We use [pnpm](https://pnpm.io/) for package management) | ||
|
|
||
| ```bash | ||
| pnpm i && pnpm start | ||
| ``` | ||
|
|
||
| ### Import Logto Vue plugin | ||
|
|
||
| ```ts | ||
| import { createLogto, LogtoConfig } from '@logto/vue'; | ||
|
|
||
| const config: LogtoConfig = { | ||
| appId: '<your-application-id>', | ||
| endpoint: '<your-logto-endpoint>' | ||
| }; | ||
|
|
||
| const app = createApp(App); | ||
|
|
||
| app.use(createLogto, config); | ||
| app.mount("#app"); | ||
| ``` | ||
|
|
||
| ### Setup your sign-in | ||
|
|
||
| ```ts | ||
| import { useLogto } from "@logto/vue"; | ||
|
|
||
| const { signIn } = useLogto(); | ||
| const onClickSignIn = () => signIn(redirectUrl); | ||
| ``` | ||
|
|
||
| ```html | ||
| <button @click="onClickSignIn">Sign In</button> | ||
| ``` | ||
|
|
||
| ### Retrieve Auth Status | ||
|
|
||
| ```ts | ||
| import { useLogto } from '@logto/vue'; | ||
|
|
||
| const { isAuthenticated } = useLogto(); | ||
| ``` | ||
|
|
||
| ```html | ||
| <div v-if="!isAuthenticated"> | ||
| <!-- E.g. navigate to the sign in page --> | ||
| </div> | ||
| <div v-else> | ||
| <!-- Do things when user is authenticated --> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Sign out | ||
|
|
||
| ```ts | ||
| import { useLogto } from "@logto/vue"; | ||
|
|
||
| const { signOut } = useLogto(); | ||
| const onClickSignOut = () => signOut('http://localhost:1234'); | ||
| ``` | ||
|
|
||
| ```html | ||
| <button @click="onClickSignOut">Sign Out</button> | ||
| ``` | ||
|
|
||
| ## Resources | ||
|
|
||
| [](https://logto.io/) | ||
| [](https://docs.logto.io/docs/sdk/swift/) | ||
| [](https://discord.gg/UEPaF3j5e6) |