import UriInputField from '@/mdx-components-v2/UriInputField';
import Tabs from '@mdx/components/Tabs';
import TabItem from '@mdx/components/TabItem';
import InlineNotification from '@/ds-components/InlineNotification';
import Steps from '@/mdx-components-v2/Steps';
import Step from '@/mdx-components-v2/Step';

<Steps>

<Step
  title="Add Logto SDK as a dependency"
  subtitle="Please select your favorite package manager"
>
<Tabs>
<TabItem value="npm" label="npm">

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

</TabItem>
<TabItem value="yarn" label="Yarn">

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

</TabItem>
<TabItem value="pnpm" label="pnpm">

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

</TabItem>
</Tabs>
</Step>

<Step
  title="Init LogtoClient"
  subtitle="1 step"
>

Import and init `LogtoClient` by passing config:

<pre>
  <code className="language-ts">
    {`import LogtoClient from '@logto/browser';

const logtoClient = new LogtoClient({
  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
  appId: '${props.app.id}',
});`}
  </code>
</pre>

</Step>

<Step
  title="Sign in"
  subtitle="3 steps"
>

<InlineNotification>
  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
</InlineNotification>

### Configure Redirect URI

First, let’s enter your redirect URI. E.g. `http://localhost:3000/callback`.

<UriInputField name="redirectUris" />

### Implement a sign-in button

Go back to your IDE/editor, use the following code to implement the sign-in button:

<pre>
  <code className="language-html">
    {`<button onclick="logtoClient.signIn('${
      props.redirectUris[0] ?? 'http://localhost:3000/callback'
    }')">
  Sign In
</button>`}
  </code>
</pre>

### 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
try {
  await logtoClient.handleSignInCallback(window.location.href);
  console.log(await logtoClient.isAuthenticated()); // true
} catch {
  // Handle error
}
```

Now you can test the sign-in flow.

</Step>

<Step
  title="Sign out"
  subtitle="1 step"
>

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()`.

<UriInputField
  appId={props.app.id}
  isSingle={!props.isCompact}
  name="postLogoutRedirectUris"
  title="application_details.post_sign_out_redirect_uri"
/>

### Implement a sign-out button

<pre>
  <code className="language-html">
    {`<button onclick="logtoClient.signOut('${
      props.postLogoutRedirectUris[0] ?? 'http://localhost:3000'
    }')">
  Sign Out
</button>`}
  </code>
</pre>

</Step>

</Steps>
