Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(console): update the expo SDK integration guide #6126

Merged
merged 3 commits into from
Jul 1, 2024
Merged

docs(console): update the expo SDK integration guide #6126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d23aaef
docs(console): update the expo SDK integration guide
simeng-li Jun 28, 2024
34c20ab
chore(console): update rn guide section title
simeng-li Jun 30, 2024
854fcb9
refactor(console): improve content
gao-sun Jul 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/console/src/assets/docs/fragments/_redirect-uris-native.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@ import UriInputField from '@/mdx-components/UriInputField';

import ExperienceOverview from './_experience-overview.md';

export const defaultRedirectUri = 'io.logto://callback';

<ExperienceOverview />

Now, let's configure your redirect URI. E.g. {`${props.defaultUri ?? 'http://localhost:3000/callback'}`}.
Now, let's configure your redirect URI. E.g. {`${props.defaultUri ?? defaultRedirectUri}`}.

<UriInputField name="redirectUris" />
54 changes: 19 additions & 35 deletions packages/console/src/assets/docs/guides/native-expo/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ import InlineNotification from '@/ds-components/InlineNotification';
import Steps from '@/mdx-components/Steps';
import Step from '@/mdx-components/Step';
import Checkpoint from '../../fragments/_checkpoint.md';
import RedirectUrisNative, { defaultRedirectUri } from '../../fragments/_redirect-uris-native.mdx';

<Steps>

<Step
title="Installation"
title="Install SDK"
subtitle="Install Logto SDK and peer dependencies"
>

Expand Down Expand Up @@ -56,7 +57,7 @@ If you're installing this in a [bare React Native app](https://docs.expo.dev/bar

Import and use `LogtoProvider` to provide a Logto context:

<Code className="language-tsx">
<Code className="language-tsx" title="App.tsx">
{`import { LogtoProvider, LogtoConfig } from '@logto/rn';
const config: LogtoConfig = {
Expand All @@ -73,16 +74,14 @@ const App = () => (

</Step>

<Step title="Implement sign-in and sign-out">

Add a native redirect URI (for example, `io.logto://callback`), then click "Save".
<Step title="Configure redirect URIs">

<UriInputField name="redirectUris" />
<RedirectUrisNative />
gao-sun marked this conversation as resolved.
Show resolved Hide resolved

- For iOS, the redirect URI scheme does not really matter since the `ASWebAuthenticationSession` class will listen to the redirect URI regardless of if it's registered.
- For Android, the redirect URI scheme must be filled in Expo's `app.json` file, for example:

```json
```json title="app.json"
{
"expo": {
"scheme": "io.logto"
Expand All @@ -98,7 +97,7 @@ The redirect URI is used to redirect the user back to your app after they sign i

You can use `useLogto` hook to sign in and sign out:

<Code className="language-tsx">
<Code className="language-tsx" title="App.tsx">
{`import { useLogto } from '@logto/rn';
import { Button } from 'react-native';

Expand All @@ -111,7 +110,7 @@ const Content = () => {
<Button title="Sign out" onPress={async () => signOut()} />
) : (
<Button title="Sign in" onPress={async () => signIn('${
props.redirectUris[0] ?? 'io.logto://callback'
props.redirectUris[0] || defaultRedirectUri
}')} />
)}
</div>
Expand All @@ -121,11 +120,17 @@ const Content = () => {

</Step>

<Step title="Checkpoint: Test your app">

<Checkpoint />

</Step>

<Step title="Display user information">

To display the user's information, you can use the `getIdTokenClaims()` method:

<Code className="language-tsx">
<Code className="language-tsx" title="App.tsx">
{`import { useLogto } from '@logto/rn';
import { Button, Text } from 'react-native';

Expand All @@ -136,43 +141,22 @@ const Content = () => {
useEffect(() => {
if (isAuthenticated) {
getIdTokenClaims().then((claims) => {
setUser(claims);
setUser(claims); // { sub: '...', ... }
});
}
}, [isAuthenticated]);
}, [isAuthenticated, getIdTokenClaims]);

return (
<div>
{isAuthenticated ? (
<>
<Text>{user?.name}</Text>
<Text>{user?.email}</Text>
<Button title="Sign out" onPress={async () => signOut()} />
</>
) : (
<Button title="Sign in" onPress={async () => signIn('${
props.redirectUris[0] ?? 'io.logto://callback'
}')} />
)}
</div>
);
// ...
};`}
</Code>

</Step>

<Step title="Checkpoint: Test your app">

<Checkpoint />

</Step>

<Step title="Troubleshooting">

For Expo projects, if you encounter the error `Unable to resolve "@logto/client/shim" from "node_modules/@logto/rn/lib/index.js"`, you can resolve it by adding the following to your `metro.config.js` file:

```js
// metro.config.js
```js title="metro.config.js"
const config = {
// ...
resolver: {
Expand Down
Loading