From e82c8587703767bfaede78041dbab8d3dfc7d0ce Mon Sep 17 00:00:00 2001 From: Bereket Engida Date: Thu, 31 Oct 2024 18:36:12 +0300 Subject: [PATCH] docs: started --- docs/components/icons.tsx | 13 ++++++ docs/components/sidebar-content.tsx | 11 +++++ docs/content/docs/installation.mdx | 3 +- docs/content/docs/integrations/expo.mdx | 59 ++++++++++++++++++++----- 4 files changed, 74 insertions(+), 12 deletions(-) diff --git a/docs/components/icons.tsx b/docs/components/icons.tsx index c1ce838a6c..a5504cadb5 100644 --- a/docs/components/icons.tsx +++ b/docs/components/icons.tsx @@ -392,4 +392,17 @@ export const Icons = { ), + expo: (props?: SVGProps) => ( + + + + ), }; diff --git a/docs/components/sidebar-content.tsx b/docs/components/sidebar-content.tsx index d4176926a7..ba0e8da488 100644 --- a/docs/components/sidebar-content.tsx +++ b/docs/components/sidebar-content.tsx @@ -632,6 +632,17 @@ export const contents: Content[] = [ icon: Icons.elysia, href: "/docs/integrations/elysia", }, + { + group: true, + title: "Mobile & Desktop", + href: "/docs/integrations", + icon: LucideAArrowDown, + }, + { + title: "Expo", + icon: Icons.expo, + href: "/docs/integrations/expo", + }, ], }, { diff --git a/docs/content/docs/installation.mdx b/docs/content/docs/installation.mdx index ba4655c671..b745bcba45 100644 --- a/docs/content/docs/installation.mdx +++ b/docs/content/docs/installation.mdx @@ -355,8 +355,7 @@ Better Auth supports any backend framework with standard Request and Response ob ``` - ```ts - // app/routes/api/auth/$.ts + ```ts title="app/routes/api/auth/$.ts" import { auth } from '~/lib/server/auth' import { createAPIFileRoute } from '@tanstack/start/api' diff --git a/docs/content/docs/integrations/expo.mdx b/docs/content/docs/integrations/expo.mdx index e42ad187f9..5138bdfa14 100644 --- a/docs/content/docs/integrations/expo.mdx +++ b/docs/content/docs/integrations/expo.mdx @@ -3,19 +3,58 @@ title: Expo description: Learn how to use Better Auth with Expo. --- -Expo is a popular framework for building cross-platform apps with React Native. This guide will show you how to use Better Auth with Expo. - +Expo is a popular framework for building cross-platform apps with React Native. Better Auth supports both Expo native and web apps. ## Installation -First we need to install Better Auth main packge on both Expo and Our Server. + + + ## Configure A Better Auth Backend + Before using Better Auth with Expo, make sure you have a Better Auth backend set up. You can either use a separate server or leverage Expo's new [API Routes](https://docs.expo.dev/router/reference/api-routes) feature to host your Better Auth instance. + + To get started, check out our [installation](/docs/installation) guide for setting up Better Auth on your server. + + + ## Install Better Auth and Expo Plugin + + With your server up and running, install both Better Auth and the Expo plugin in your Expo project. + + ```package-install + better-auth @better-auth/expo + ``` + + + ## Initialize Better Auth Client + + To initialize Better Auth in your Expo app, you need to call `createAuthClient` with the base url of your Better Auth backend. Make sure to import the client from `/react`. + + ```ts title="src/auth-client.ts" + import { createAuthClient } from 'better-auth/react'; + + const authClient = createAuthClient({ + basURL: 'http://localhost:8081', /* base url of your Better Auth backend. */ + }); + ``` + + Be sure to include the full URL, including the path, if you've changed the default path from `/api/auth`. + + + + ## Configure Metro Bundler + + To resolve better auth exports you'll need to enable `unstable_enablePackageExports` in your metro config. + + ```js title="metro.config.js" + const { getDefaultConfig } = require("expo/metro-config"); + + const config = getDefaultConfig(__dirname) + + config.resolver.unstable_enablePackageExports = true; // [!code highlight] + + module.exports = config; + ``` + + -```package-install -install better-auth -``` -Then we need to install the Expo plugin. -```package-install -install @betterauth/expo -``` \ No newline at end of file