### Install and Run Logto Core

Source: https://github.com/logto-io/logto/blob/master/packages/core/README.md

Install dependencies and start the Logto core backend service locally.

```bash
pnpm i && pnpm dev
```

--------------------------------

### Install Logto Go SDK

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-go/README.mdx

Install the Logto Go SDK client package using go get.

```bash
go get github.com/logto-io/go/v2/client
```

--------------------------------

### Start Development Server

Source: https://github.com/logto-io/logto/blob/master/packages/account/README.md

Run this command to start the development server for the account center.

```bash
pnpm dev
```

--------------------------------

### Install Logto SDK for PHP

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-php/README.mdx

Install the Logto SDK using Composer.

```bash
composer require logto/sdk
```

--------------------------------

### Install Logto SDK

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-python/README.mdx

Install the Logto SDK for Python using pip. This is the first step before initializing the client.

```bash
pip install logto # or `poetry add logto` or whatever you use
```

--------------------------------

### Install Logto Capacitor SDK

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/native-capacitor/README.mdx

Install the Logto Capacitor SDK and its peer dependencies using npm or yarn.

```bash
npm install @logto/capacitor @capacitor/browser @capacitor/app @capacitor/preferences
yarn add @logto/capacitor @capacitor/browser @capacitor/app @capacitor/preferences
```

--------------------------------

### Guide Ordering Configuration

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/README.md

Specifies how to configure the display order of guides using a `config.json` file within the guide's directory. This allows for custom sorting based on priority or design specifications.

```json
{
  "order": 1
}

```

--------------------------------

### Install @logto/api

Source: https://github.com/logto-io/logto/blob/master/packages/api/README.md

Install the @logto/api package using npm.

```bash
npm install @logto/api
```

--------------------------------

### Install rsync

Source: https://github.com/logto-io/logto/blob/master/AGENTS.md

Installs the 'rsync' package using apt-get. This is a prerequisite for the '@logto/core' package to use the 'copy:apidocs' functionality.

```bash
sudo apt-get install -y rsync
```

--------------------------------

### Start Development Server

Source: https://github.com/logto-io/logto/blob/master/AGENTS.md

Starts the development server for Logto. This command should be used instead of 'pnpm dev' to avoid re-running prepack, which is already handled by the update script.

```bash
pnpm start:dev
```

--------------------------------

### Install Logto SDK with npm

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/spa-vanilla/README.mdx

Install the Logto browser SDK using npm. This is the first step to integrate Logto into your project.

```bash
npm i @logto/browser
```

--------------------------------

### Basic React Router Setup

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-react-router/README.mdx

Demonstrates the fundamental setup for React Router in a React application. Includes importing necessary components and defining basic routes.

```jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

export default App;
```

--------------------------------

### Install Logto SDK with pnpm

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/spa-vanilla/README.mdx

Install the Logto browser SDK using pnpm. This is the first step to integrate Logto into your project.

```bash
pnpm add @logto/browser
```

--------------------------------

### Install Logto React SDK

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/spa-react/README.mdx

Install the Logto SDK for your React project using npm or yarn.

```bash
npm install @logto/react
# or
yarn add @logto/react
```

--------------------------------

### Guide Directory Structure

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/README.md

Defines the standard directory structure for a new guide within the Logto console project. Each guide requires a dedicated directory with specific subfolders and files.

```bash
[
target]-name
├── assets
│   └── image-name.png
├── index.ts
├── logo.svg
└── README.mdx

```

--------------------------------

### Install Logto SDK with yarn

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/spa-vanilla/README.mdx

Install the Logto browser SDK using yarn. This is the first step to integrate Logto into your project.

```bash
yarn add @logto/browser
```

--------------------------------

### Install Logto Nuxt SDK

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-nuxt/README.mdx

Install the @logto/nuxt package using npm or yarn.

```bash
npm install @logto/nuxt
# or
yarn add @logto/nuxt
```

--------------------------------

### Install Logto SDK and Dependencies

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-express/README.mdx

Install the Logto Express SDK and necessary middleware like cookie-parser and express-session using npm or yarn.

```bash
npm install @logto/express cookie-parser express-session
# or
yarn add @logto/express cookie-parser express-session
```

--------------------------------

### Start Docker Daemon

Source: https://github.com/logto-io/logto/blob/master/AGENTS.md

Starts the Docker daemon in the background and sets permissions for the Docker socket. This is the first step in setting up the development environment.

```bash
sudo dockerd &>/tmp/dockerd.log &
sudo chmod 666 /var/run/docker.sock
```

--------------------------------

### Local Development with Node.js

Source: https://github.com/logto-io/logto/blob/master/README.md

Initiate a new Logto project locally using npm. This method requires PostgreSQL to be installed.

```bash
npm init @logto
```

--------------------------------

### Logto Sign-In/Sign-Out Example

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-react-router/README.mdx

This example demonstrates how to implement sign-in and sign-out functionality using Logto within a React component. It conditionally renders buttons based on authentication state.

```jsx
import React from "react";

const Home = ({ claims }) => {
  return (
    <div>
      {claims ? (
        <div>
          <p>Hello {claims?.email ?? claims?.name ?? claims?.sub}</p>
          <form action="/api/logto/sign-out" method="get">
            <button type="submit">Sign Out</button>
          </form>
        </div>
      ) : (
        <form action="/api/logto/sign-in" method="get">
          <button type="submit">Sign In</button>
        </form>
      )}
    </div>
  );
};

export default Home;
```

--------------------------------

### Install Logto Core Package

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-go/README.mdx

Install the core Logto package for Go to access predefined values and types. This is a prerequisite for integrating Logto into your web application.

```bash
# Install the core package for accessing predefined values and types
go get github.com/logto-io/go/v2/core

```

--------------------------------

### Compose Magic Link Example

Source: https://github.com/logto-io/logto/blob/master/packages/integration-tests/CHANGELOG.md

An example of how to compose a magic link using the obtained token and user email. This link should direct users to a landing page in your application.

```http
https://yourapp.com/landing-page?token=YHwbXSXxQfL02IoxFqr1hGvkB13uTqcd&email=user@example.com
```

--------------------------------

### Local Development with Docker Compose

Source: https://github.com/logto-io/logto/blob/master/README.md

Use this command to set up Logto locally using Docker Compose. Ensure Docker Desktop is installed.

```bash
curl -fsSL https://raw.githubusercontent.com/logto-io/logto/HEAD/docker-compose.yml | \
  docker compose -p logto -f - up
```

--------------------------------

### Install Logto Flutter SDK via pub.dev

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/native-flutter/README.mdx

Install the logto_dart_sdk package using the pub package manager. Add the dependency to your pubspec.yaml file and run 'flutter pub get'.

```sh
flutter pub get logto_dart_sdk
```

```yaml
dependencies:
  logto_dart_sdk: ^3.0.0
```

```bash
flutter pub get
```

--------------------------------

### Implement Sign-in Route and Link

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-go/README.mdx

Add a sign-in route to handle authentication requests and include a 'Sign In' link on the home page to initiate the sign-in process.

```go
func main() {
    // ...

    // Add a link to perform a sign-in request on the home page
    router.GET("/", func(ctx *gin.Context) {
        // ...
        homePage := `<h1>Hello Logto</h1>` +
            "<div>" + authState + "</div>" +
            // Add link
            `<div><a href="/sign-in">Sign In</a></div>`

        ctx.Data(http.StatusOK, "text/html; charset=utf-8", []byte(homePage))
    })

    // Add a route for handling sign-in requests

```

--------------------------------

### Implement Sign-In Route for Sign-Up

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-php/README.mdx

Create a route to initiate the sign-in process, prioritizing the sign-up interaction mode.

```php
Route::get('/sign-in', function () {
  return redirect($client->signIn('${props.redirectUris[0] || defaultRedirectUri}', InteractionMode::signUp));
});
```

--------------------------------

### Install python-jose Dependency

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/api-python/README.mdx

Install the python-jose library with ECDSA support, which is required for token validation.

```bash
pip install python-jose[ecdsa]
```

--------------------------------

### Serve OpenAPI Documentation with ReDoc CLI

Source: https://github.com/logto-io/logto/blob/master/packages/core/README.md

Use the ReDoc CLI to serve the OpenAPI documentation from a local Logto instance. Ensure the service is running and accessible at http://localhost:3001.

```bash
npx redoc-cli serve http://localhost:3001/api/swagger.json
```

--------------------------------

### Install Logto Chrome Extension SDK

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/spa-chrome-extension/README.mdx

Use npm or yarn to install the Logto Chrome Extension package.

```bash
npm install @logto/chrome-extension
# or
yarn add @logto/chrome-extension
```

--------------------------------

### Sign In with Login Hint Parameter

Source: https://github.com/logto-io/logto/blob/master/packages/experience/CHANGELOG.md

Example of using the signIn function with the 'loginHint' parameter to pre-fill the user's identifier, improving the sign-in flow. This is applicable when the first screen is 'signIn' or 'register'.

```javascript
void signIn({
    redirectUri,
    loginHint: "user@example.com",
    firstScreen: "signIn", // or 'register'
  });
```

--------------------------------

### Initialize LogtoClient for User Requests

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-go/README.mdx

Create a new LogtoClient instance for each user request, passing the Logto configuration and the session storage adapter. This client is used to manage user authentication state.

```go
func main() {
    // ...

    router.GET("/", func(ctx *gin.Context) {
        // Init LogtoClient
        session := sessions.Default(ctx)
        logtoClient := client.NewLogtoClient(
            logtoConfig,
            &SessionStorage{session: session},
        )

        // Use Logto to control the content of the home page
        authState := "You are not logged in to this website. :("

        if logtoClient.IsAuthenticated() {
            authState = "You are logged in to this website! :)"
        }

        homePage := "<h1>Hello Logto</h1>" +
            "<div>" + authState + "</div>"

        ctx.Data(http.StatusOK, "text/html; charset=utf-8", []byte(homePage))
    })

    // ...
}
```

--------------------------------

### Implement Sign-In

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/native-flutter/README.mdx

Initiates the sign-in process by redirecting the user to the Logto sign-in page. Ensure the redirectUri is correctly configured.

```dart
class _MyHomePageState extends State<MyHomePage> {
  // ...
  final redirectUri = 'io.logto://callback';

  @override
  Widget build(BuildContext context) {
    // ...

    Widget signInButton = TextButton(
      onPressed: () async {
        // highlight-start
        await logtoClient.signIn(redirectUri);
        render();
        // highlight-end
      },
      child: const Text('Sign In'),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SelectableText('My Demo App'),
            signInButton,
          ],
        ),
      ),
    );
  }
}
```

--------------------------------

### Install Playwright Browsers

Source: https://github.com/logto-io/logto/blob/master/AGENTS.md

Installs the necessary Playwright browsers, including Chromium with dependencies. This is a prerequisite for running tests in the '@logto/elements' package.

```bash
pnpm exec playwright install chromium --with-deps
```

--------------------------------

### Initialize Logto Client (General)

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-ruby/README.mdx

Initialize the Logto client with configuration details including endpoint, app ID, and app secret. This snippet is a general example applicable to various Ruby frameworks.

```ruby
require "logto/client"

@client = LogtoClient.new(
  config: LogtoClient::Config.new(
    endpoint: "${props.endpoint}",
    app_id: "${props.app.id}",
    app_secret: "${props.secrets[0]?.value ?? props.app.secret}"
  ),
  navigate: ->(uri) { a_redirect_method(uri) },
  storage: LogtoClient::SessionStorage.new(the_session_object)
)
end
```

--------------------------------

### Install Logto Tunnel CLI

Source: https://github.com/logto-io/logto/blob/master/packages/tunnel/CHANGELOG.md

Install the Logto tunnel CLI globally using npm. This command is required before you can use the tunnel service.

```bash
npm i @logto/tunnel -g
```

--------------------------------

### Implement Sign-In and Sign-Out in SwiftUI

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/native-ios-swift/README.mdx

Example of implementing sign-in and sign-out buttons in a SwiftUI view using LogtoClient. Handles authentication state updates.

```swift
struct ContentView: View {
  @State var isAuthenticated: Bool

  init() {
    isAuthenticated = client.isAuthenticated
  }

  var body: some View {
    VStack {
      if isAuthenticated {
        Button("Sign Out") {
          Task { [self] in
            await client.signOut()
            isAuthenticated = false
          }
        }
      } else {
        Button("Sign In") {
          Task { [self] in
            do {
              try await client.signInWithBrowser(redirectUri: "${props.redirectUris[0] ?? defaultRedirectUri}")
              isAuthenticated = true
            } catch let error as LogtoClientErrors.SignIn {
              // error occured during sign in
            } catch {
              // other errors
            }
          }
        }
      }
    }
  }
}
```

--------------------------------

### Initiate Sign-In with Sign-Up Mode

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-python/README.mdx

Initiate the sign-in process, forcing the first interaction to be the sign-up page. This is useful for new user registrations.

```python
@app.route("/sign-in")
async def sign_in():
    # Get the sign-in URL and redirect the user to it
    return redirect(await client.signIn(
        redirectUri=f"{props.redirectUris[0] || defaultRedirectUri}",
        interactionMode="signUp", # Show the sign-up page on the first screen
    ))
```

--------------------------------

### Install Logto Vue SDK

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/spa-vue/README.mdx

Install the Logto Vue SDK using npm or yarn. This is the first step to integrate Logto into your Vue project.

```bash
npm install @logto/vue
# or
yarn add @logto/vue
```

--------------------------------

### Example: SHA256 with Salt for Legacy Passwords

Source: https://github.com/logto-io/logto/blob/master/packages/schemas/CHANGELOG.md

Example of storing a password using SHA256 with a salt for legacy systems. The '@' symbol represents the input password.

```json
[
  "sha256",
  ["salt123", "@"],
  "c465f66c6ac481a7a17e9ed5b4e2e7e7288d892f12bf1c95c140901e9a70436e"
]
```

--------------------------------

### Example Database Alteration Script

Source: https://github.com/logto-io/logto/blob/master/packages/schemas/alterations/README.md

Provides an example of an alteration script with 'up' and 'down' functions to add and drop an email column from the 'user' table.

```javascript
export const up = async (connection) => {
  await connection.query(
    `
    alter table "user"
    add column "email" varchar(255) not null;
  `
  );
};

export const down = async (connection) => {
  await connection.query(
    `
    alter table "user"
    drop column "email";
  `
  );
};
```

--------------------------------

### Implement Sign-In Route

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-go/README.mdx

Handles the sign-in request by generating a sign-in URI and redirecting the user to the Logto sign-in page. Ensure the redirect URI is correctly configured in Logto.

```go
router.GET("/sign-in", func(ctx *gin.Context) {
        session := sessions.Default(ctx)
        logtoClient := client.NewLogtoClient(
            logtoConfig,
            &SessionStorage{session: session},
        )

        // The sign-in request is handled by Logto.
        // The user will be redirected to the Redirect URI on signed in.
        signInUri, err := logtoClient.SignIn("${props.redirectUris[0] ?? '<your-redirect-uri>'}")
        if err != nil {
            ctx.String(http.StatusInternalServerError, err.Error())
            return
        }

        // Redirect the user to the Logto sign-in page.
        ctx.Redirect(http.StatusTemporaryRedirect, signInUri)
    })
```

--------------------------------

### Logto OIDC Configurations Example

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/api-python/README.mdx

Example JSON response showing the 'issuer' and 'jwks_uri' endpoints from Logto's OIDC configuration. These are needed for token validation.

```json
{
  "issuer": "${appendPath(props.endpoint, '/oidc')}",
  "jwks_uri": "${appendPath(props.endpoint, '/oidc/jwks')}"
}
```

--------------------------------

### Initialize LogtoClient with Custom Storage

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/web-php/README.mdx

Initialize the LogtoClient with a custom storage mechanism instead of the default PHP session.

```php
$client = new LogtoClient(
  new LogtoConfig(
    // ...
  ),
  new YourCustomStorage(),
);
```

--------------------------------

### Run Logto Tunnel with Experience URI

Source: https://github.com/logto-io/logto/blob/master/packages/tunnel/CHANGELOG.md

Use the logto-tunnel command to set up a tunnel service. This example assumes your custom sign-in page is running on http://localhost:4000. The tunnel will be accessible at http://localhost:9000/.

```bash
logto-tunnel --endpoint https://<tenant-id>.logto.app --port 9000 --experience-uri http://localhost:4000
```

--------------------------------

### Install jose for JWT Verification

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/api-express/README.mdx

Install the 'jose' library in your Express.js project to handle JWT verification. This library is essential for validating the integrity and authenticity of incoming access tokens.

```npm
npm install jose
```

```yarn
yarn add jose
```

```pnpm
pnpm add jose
```

--------------------------------

### Implement Sign-in and Sign-out

Source: https://github.com/logto-io/logto/blob/master/packages/console/src/assets/docs/guides/native-android/README.mdx

Implement sign-in and sign-out functionality using logtoClient.signIn and logtoClient.signOut. Add a live data to observe the authentication status.

```kotlin
//...with other imports
class LogtoViewModel(application: Application) : AndroidViewModel(application) {
    // ...other codes

    // Add a live data to observe the authentication status
    private val _authenticated = MutableLiveData(logtoClient.isAuthenticated)
    val authenticated: LiveData<Boolean>
        get() = _authenticated

    fun signIn(context: Activity) {
        logtoClient.signIn(context, "${props.redirectUris[0] ?? '<your-redirect-uri>'}") { logtoException ->
            logtoException?.let { println(it) }
            // Update the live data
            _authenticated.postValue(logtoClient.isAuthenticated)
        }
    }

    fun signOut() {
        logtoClient.signOut { logtoException ->
            logtoException?.let { println(it) }
            // Update the live data
            _authenticated.postValue(logtoClient.isAuthenticated)
        }
    }
}
```