import UriInputField from '@mdx/components/UriInputField';
import Step from '@mdx/components/Step';
import Tabs from '@mdx/components/Tabs';
import TabItem from '@mdx/components/TabItem';
import InlineNotification from '@/components/InlineNotification';

<Step
  title="Add Logto SDK as a dependency"
  subtitle="Please select your favorite package manager"
  index={0}
  activeIndex={props.activeStepIndex}
  onButtonClick={() => props.onNext(1)}
>
<Tabs>
<TabItem value="npm" label="npm">

```bash
npm i @logto/vue
```

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

```bash
yarn add @logto/vue
```

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

```bash
pnpm add @logto/vue
```

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

<Step
  title="Init LogtoClient"
  subtitle="1 step"
  index={1}
  activeIndex={props.activeStepIndex}
  onButtonClick={() => props.onNext(2)}
>

<InlineNotification>
  We only support Vue 3 Composition API at this point. Will add support to Vue Options API and
  possibly Vue 2 in future releases.
</InlineNotification>

Import and use `createLogto` to install Logto plugin:

<pre>
  <code className="language-ts">
    {`import { createLogto, LogtoConfig } from '@logto/vue';

const config: LogtoConfig = {
  endpoint: '${props.endpoint}',
  appId: '${props.appId}',
};

const app = createApp(App);

app.use(createLogto, config);
app.mount("#app");`}
  </code>
</pre>

</Step>

<Step
  title="Sign in"
  subtitle="3 steps"
  index={2}
  activeIndex={props.activeStepIndex}
  onButtonClick={() => props.onNext(3)}
>

<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
  appId={props.appId}
  isSingle={!props.isCompact}
  name="redirectUris"
  title="application_details.redirect_uri"
/>

### Implement a sign-in button

We provide two composables `useHandleSignInCallback()` and `useLogto()`, which can help you easily manage the authentication flow.

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

<pre>
<code className="language-html">
{`<script setup lang="ts">
  import { useLogto } from "@logto/vue";

  const { signIn, isAuthenticated } = useLogto();
  const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:3000/callback'}');
</script>`}

</code>
</pre>

```html
<template>
  <div v-if="isAuthenticated">
    <div>Signed in</div>
  </div>
  <div v-else>
    <button @click="onClickSignIn">Sign In</button>
  </div>
</template>
```

### 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.

First let's create a callback component:

```html
<!-- CallbackView.vue -->
<script setup lang="ts">
  import { useHandleSignInCallback } from '@logto/vue';
  const { isLoading } = useHandleSignInCallback(() => {
    // Navigate to root path when finished
  });
</script>
```

```html
<template>
  <!-- When it's working in progress -->
  <p v-if="isLoading">Redirecting...</p>
</template>
```

Finally insert the code below to create a `/callback` route which does NOT require authentication:

```ts
// Assuming vue-router
const router = createRouter({
  routes: [
    {
      path: '/callback',
      name: 'callback',
      component: CallbackView,
    },
  ],
});
```

</Step>

<Step
  title="Sign out"
  subtitle="1 step"
  index={3}
  activeIndex={props.activeStepIndex}
  onButtonClick={() => props.onNext(4)}
>

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.appId}
  isSingle={!props.isCompact}
  name="postLogoutRedirectUris"
  title="application_details.post_sign_out_redirect_uri"
/>

### Implement a sign-out button

<pre>
<code className="language-html">
{`<script setup lang="ts">
  import { useLogto } from "@logto/vue";

  const { signOut } = useLogto();
  const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:3000'}');
</script>`}

</code>
</pre>

```html
<template>
  <button @click="onClickSignOut">Sign Out</button>
</template>
```

</Step>

<Step
  title="Further readings"
  subtitle="4 articles"
  index={4}
  activeIndex={props.activeStepIndex}
  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
>

- [Customize sign-in experience](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience)
- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-sms-or-email-passwordless-sign-in)
- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/passwordless-sign-in-by-adding-connectors#enable-social-sign-in)
- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)

</Step>
