"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "get-started", "hProperties": { "id": "get-started" } }, "depth": 2, "value": "Get started" }, { "data": { "id": "integrate-with-logto-sdk", "hProperties": { "id": "integrate-with-logto-sdk" } }, "depth": 2, "value": "Integrate with Logto SDK" }, { "data": { "id": "installation", "hProperties": { "id": "installation" } }, "depth": 3, "value": "Installation" }, { "data": { "id": "init-logto-provider", "hProperties": { "id": "init-logto-provider" } }, "depth": 3, "value": "Init Logto provider" }, { "data": { "id": "implement-sign-in-and-sign-out", "hProperties": { "id": "implement-sign-in-and-sign-out" } }, "depth": 3, "value": "Implement sign-in and sign-out" }, { "data": { "id": "display-user-information", "hProperties": { "id": "display-user-information" } }, "depth": 3, "value": "Display user information" }, { "data": { "id": "checkpoint-run-the-application", "hProperties": { "id": "checkpoint-run-the-application" } }, "depth": 2, "value": "Checkpoint: Run the application" }, { "data": { "id": "further-readings", "hProperties": { "id": "further-readings" } }, "depth": 2, "value": "Further readings" }]; const readingTime = { "minutes": 1, "words": 354, "text": "less than a minute read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Checkpoint, GetStarted, LogtoCloudButton, Note} = _components; if (!Checkpoint) _missingMdxReference("Checkpoint", true); if (!GetStarted) _missingMdxReference("GetStarted", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "get-started", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#get-started", children: _jsx(_components.span, { children: "#" }) }), "Get started"] }), "\n", _jsx(GetStarted, { framework: { name: 'Expo (React Native)', url: 'https://expo.dev/', description: 'is an ecosystem of tools that help you create universal native apps with React that run on Android, iOS, and the web.' }, programmingLanguage: "TypeScript", applicationType: "Native" }), "\n", _jsxs(_components.h2, { id: "integrate-with-logto-sdk", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#integrate-with-logto-sdk", children: _jsx(_components.span, { children: "#" }) }), "Integrate with Logto SDK"] }), "\n", _jsxs(_components.h3, { id: "installation", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#installation", children: _jsx(_components.span, { children: "#" }) }), "Installation"] }), "\n", _jsx(_components.p, { children: "Install Logto SDK and peer dependencies via your favorite package manager:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# or pnpm, yarn, etc.\nnpm i @logto/rn\nnpm i expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage\n" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "@logto/rn" }), " package is the SDK for Logto. The remaining packages are its peer dependencies. They couldn't be listed as direct dependencies because the Expo CLI requires that all dependencies for native modules be installed directly within the root project's ", _jsx(_components.code, { children: "package.json" }), "."] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["If you're installing this in a ", _jsx(_components.a, { href: "https://docs.expo.dev/bare/overview", children: "bare React Native app" }), ", you\nshould also follow these ", _jsx(_components.a, { href: "https://docs.expo.dev/bare/installing-expo-modules/", children: "additional installation\ninstructions" }), "."] }) }), "\n", _jsxs(_components.h3, { id: "init-logto-provider", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#init-logto-provider", children: _jsx(_components.span, { children: "#" }) }), "Init Logto provider"] }), "\n", _jsxs(_components.p, { children: ["Import and use ", _jsx(_components.code, { children: "LogtoProvider" }), " to provide a Logto context:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { LogtoProvider, LogtoConfig } from '@logto/rn';\n\nconst config: LogtoConfig = {\n endpoint: '',\n appId: '',\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\n", _jsxs(_components.h3, { id: "implement-sign-in-and-sign-out", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#implement-sign-in-and-sign-out", children: _jsx(_components.span, { children: "#" }) }), "Implement sign-in and sign-out"] }), "\n", _jsxs(_components.p, { children: ["Switch to the application details page of Logto Console. Add a native redirect URI (for example, ", _jsx(_components.code, { children: "io.logto://callback" }), "), then click \"Save\"."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["For iOS, the redirect URI scheme does not really matter since the ", _jsx(_components.code, { children: "ASWebAuthenticationSession" }), " class will listen to the redirect URI regardless of if it's registered."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["For Android, the redirect URI scheme must be filled in Expo's ", _jsx(_components.code, { children: "app.json" }), " file, for example:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"expo\": {\n \"scheme\": \"io.logto\"\n }\n}\n" }) }), "\n"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Now back to your app, you can use ", _jsx(_components.code, { children: "useLogto" }), " hook to sign in and sign out:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useLogto } from '@logto/rn';\nimport { Button } from 'react-native';\n\nconst Content = () => {\n const { signIn, signOut, isAuthenticated } = useLogto();\n\n return (\n

\n {isAuthenticated ? (\n

\n );\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "display-user-information", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#display-user-information", children: _jsx(_components.span, { children: "#" }) }), "Display user information"] }), "\n", _jsxs(_components.p, { children: ["To display the user's information, you can use the ", _jsx(_components.code, { children: "getIdTokenClaims()" }), " method:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useLogto } from '@logto/rn';\nimport { Button, Text } from 'react-native';\n\nconst Content = () => {\n const { getIdTokenClaims, isAuthenticated } = useLogto();\n const [user, setUser] = useState(null);\n\n useEffect(() => {\n if (isAuthenticated) {\n getIdTokenClaims().then((claims) => {\n setUser(claims);\n });\n }\n }, [isAuthenticated]);\n\n return (\n

\n {isAuthenticated ? (\n <>\n {user?.name}\n {user?.email}\n

\n );\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "checkpoint-run-the-application", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#checkpoint-run-the-application", children: _jsx(_components.span, { children: "#" }) }), "Checkpoint: Run the application"] }), "\n", _jsx(Checkpoint, {}), "\n", _jsxs(_components.h2, { id: "further-readings", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#further-readings", children: _jsx(_components.span, { children: "#" }) }), "Further readings"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "Customize sign-in experience" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Configure connectors" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Protect your API" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "Try Logto Today" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }