import UriInputField from '@/mdx-components/UriInputField';
import Steps from '@/mdx-components/Steps';
import Step from '@/mdx-components/Step';
import CustomDomainEndpointNotice from '@/mdx-components/CustomDomainEndpointNotice';
import NpmLikeInstallation from '@/mdx-components/NpmLikeInstallation';

import capaticorIos from './assets/capacitor-ios.webp';
import logtoSignInPage from './assets/logto-sign-in-page.webp';
import logtoSignOutPage from './assets/logto-sign-out-page.webp';
import RedirectUrisNative from '../../fragments/_redirect-uris-native.mdx';

export const defaultRedirectUri = 'com.example.app://callback';
export const defaultPostSignOutUri = 'com.example.app://callback/sign-out';

<Steps>

<Step title="Install Capacitor SDK">

To get started, you need to create a Capacitor project. You can follow the [official guide](https://capacitorjs.com/docs/getting-started) to create one.

This tutorial is framework-agnostic, so you can use any UI framework you prefer and update the code accordingly.

First, install Logto Capacitor SDK and its peer dependencies:

<NpmLikeInstallation packageName="@logto/capacitor @capacitor/browser @capacitor/app @capacitor/preferences" />

</Step>

<Step title="Init Logto client">

Add the following code to your Capacitor project:

<Code className="language-ts">
    {`import LogtoClient from '@logto/capacitor';

const logtoClient = new LogtoClient({
  endpoint: '${props.endpoint}',
  appId: '${props.app.id}',
});`}
</Code>

<br/>

<CustomDomainEndpointNotice />

</Step>

<Step title="Configure redirect URIs" >

<RedirectUrisNative defaultUri={defaultRedirectUri} />

Ensure that the URI redirects to the Capacitor app. The value may vary depending on your Capacitor app configuration. For more details, see [Capacitor Deep Links](https://capacitorjs.com/docs/guides/deep-links).

Remember to click on **Save changes** after updating the redirect URI.

</Step>

<Step title="Implement sign-in">

<Code className="language-ts">
    {`const onClick = async () => {
  await logtoClient.signIn('${props.redirectUris[0] || defaultRedirectUri}');
  console.log(await logtoClient.isAuthenticated()); // true
  console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... }
};`}
</Code>

Run the Capacitor app and click the sign-in button. A browser window will open, redirecting to the Logto sign-in page.

<center>
  <img
    style={{ border: '1px solid #eaeaea', borderRadius: '16px' }}
    src={logtoSignInPage}
    alt="Logto sign-in page"
    width="320"
  />
</center>

> If the user closes the browser window without completing the authentication flow, the Capacitor
> app will receive a `LogtoClientError`.

</Step>

<Step title="Implement sign-out">

Since Capacitor leverages the Safari View Controller on iOS and Chrome Custom Tabs on Android, the authentication state can be persisted for a while. However, sometimes the user may want to sign out of the application immediately. In this case, we can use the `signOut` method to sign out the user:

```ts
const onClick = async () => {
  await logtoClient.signOut();
  console.log(await logtoClient.isAuthenticated()); // false
};
```

The `signOut` method has an optional parameter for the post sign-out redirect URI. If it's not provided, the user will be redirected to the Logto sign-out page:

<center>
  <img
    style={{ border: '1px solid #eaeaea', borderRadius: '16px' }}
    src={logtoSignOutPage}
    alt="Logto sign-out page"
    width="320"
  />
</center>

The user needs to click "Done" to close the web view and return to the Capacitor app. If you want to automatically redirect the user back to the Capacitor app, you can provide the post sign-out redirect URI:

<UriInputField name="postLogoutRedirectUris" />

Ensure that the post sign-out redirect URI redirects to the Capacitor app. Then add the following code to the `onClick` handler of the sign-out button:

<Code className="language-ts">
    {`const onClick = async () => {
  await logtoClient.signOut('${props.postLogoutRedirectUris[0] || defaultPostSignOutUri}');
};`}
</Code>

</Step>

<Step title="Checkpoint: Complete the authentication flow">

Run the Capacitor app click the sign-in button. If everything goes well, when the authentication flow is completed, the Capacitor app will receive the sign-in result and print the user claims in the console.

<center>
  <img src={capaticorIos} alt="Capacitor iOS app" width="800" />
</center>

Then click the sign-out button, and the Capacitor app will be redirected to the Logto sign-out page. It will automatically redirect back to the Capacitor app if the post sign-out redirect URI is configured.

</Step>

</Steps>
