diff --git a/apps/docs/components/Frameworks.tsx b/apps/docs/components/Frameworks.tsx index 8ea096c6c1a..bca35b6af92 100644 --- a/apps/docs/components/Frameworks.tsx +++ b/apps/docs/components/Frameworks.tsx @@ -14,12 +14,12 @@ const Frameworks = () => { href: '/guides/with-angular', }, { - name: 'Expo', + name: 'Expo React Native', logo: { light: '/docs/img/icons/expo-icon.svg', dark: '/docs/img/icons/expo-icon-dark.svg', }, - href: '/guides/with-expo', + href: '/guides/with-expo-react-native', }, { name: 'Flutter', diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 17de3d3ff4e..7e789a48d13 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -297,8 +297,8 @@ export const gettingstarted: NavMenuConstant = { url: '/guides/getting-started/tutorials/with-flutter', }, { - name: 'Expo', - url: '/guides/getting-started/tutorials/with-expo', + name: 'Expo React Native', + url: '/guides/getting-started/tutorials/with-expo-react-native', }, { name: 'Android Kotlin', @@ -333,6 +333,19 @@ export const cli = { ], } +export const NativeMobileLoginItems = [ + { + name: 'Apple', + icon: '/docs/img/icons/apple-icon', + url: '/guides/auth/social-login/auth-apple?platform=react-native', + }, + { + name: 'Google', + icon: '/docs/img/icons/google-icon', + url: '/guides/auth/social-login/auth-google?platform=react-native', + }, +] + export const SocialLoginItems = [ { name: 'Google', @@ -493,6 +506,11 @@ export const auth = { url: '/guides/auth/social-login', items: [...SocialLoginItems], }, + { + name: 'Native Mobile Login', + url: '/guides/auth/native-mobile-login', + items: [...NativeMobileLoginItems], + }, { name: 'Enterprise SSO', url: '/guides/auth/enterprise-sso', diff --git a/apps/docs/pages/guides/auth/native-mobile-login.mdx b/apps/docs/pages/guides/auth/native-mobile-login.mdx new file mode 100644 index 00000000000..867b6d99da6 --- /dev/null +++ b/apps/docs/pages/guides/auth/native-mobile-login.mdx @@ -0,0 +1,54 @@ +import Layout from '~/layouts/DefaultGuideLayout' +import { IconPanel } from 'ui' +import Link from 'next/link' +import { NativeMobileLoginItems } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants' + +export const meta = { + title: 'Native Mobile Login', + description: 'Logging in with native mobile identity providers like Apple & Google.', +} + +Some native mobile operating systems, like iOS and Android, offer a built-in identity provider for convenient user authentication. + +For iOS, apps that use a third-party or social login service to set up or authenticate the user’s primary account with the app must also offer Sign in with Apple as an equivalent option. + +## Benefits + +There are several reasons why you might want to add social login to your applications: + +- **Improved user experience**: Users can register and log in to your application using their existing app store accounts, which can be faster and more convenient than creating a new account from scratch. This makes it easier for users to access your application, improving their overall experience. + +- **Better user engagement**: You can access additional data and insights about your users, such as their interests, demographics, and social connections. This can help you tailor your content and marketing efforts to better engage with your users and provide a more personalized experience. + +- **Increased security**: Social login can improve the security of your application by leveraging the security measures and authentication protocols of the social media platforms that your users are logging in with. This can help protect against unauthorized access and account takeovers. + +## Set up a native social login with Supabase Auth + +
+ {NativeMobileLoginItems.map((item) => ( + + + + {item.description} + + + +))} + +
+ +## Provider Tokens + +Just like with Oauth, you will receive a copy of the provider token in case you need to use it further. For example, you can use the Google provider token to access Google APIs on behalf of your user. + +Provider tokens are intentionally not stored in your project's database, however. This is because provider tokens give access to potentially sensitive user data in third-party systems. Different applications have different needs, and one application's OAuth scopes may be significantly more permissive than another. If you do want to use the provider token outside of the browser that completed the OAuth flow, you will have to send it manually to a secure server under your control. + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx index 68b770c809e..43e6f2392ab 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx @@ -22,125 +22,261 @@ There are three general ways to use Sign in with Apple, depending on the applica In some cases you're able to use the OAuth flow within web-based native apps such as with [React Native](https://reactnative.dev), [Expo](https://expo.dev) or other similar frameworks. It is best practice to use native Sign in with Apple capabilities on those platforms instead. -Before you can use Sign in with Apple, you need to obtain an [Apple Developer](https://developer.apple.com) account. +When developing with Expo, you can test Sign in with Apple via the Expo Go app, in all other cases you will need to obtain an [Apple Developer](https://developer.apple.com) account to enable the capability. -## Using the OAuth flow for web + + -Sign in with Apple's OAuth flow is designed for web or browser based sign in methods. It can be used on web-based apps as well as websites, though some users can benefit by using Sign in with Apple JS directly. + ## Using the OAuth flow for web -Behind the scenes, Supabase Auth uses the [REST APIs](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api) provided by Apple. + Sign in with Apple's OAuth flow is designed for web or browser based sign in methods. It can be used on web-based apps as well as websites, though some users can benefit by using Sign in with Apple JS directly. -To initiate sign in, you can use the `signInWithOAuth()` method from the Supabase JavaScript library: + Behind the scenes, Supabase Auth uses the [REST APIs](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api) provided by Apple. -```ts -supabase.auth.signInWithOAuth({ - provider: 'apple', -}) -``` + To initiate sign in, you can use the `signInWithOAuth()` method from the Supabase JavaScript library: -This call takes the user to Apple's consent screen. Once the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session. + ```ts + supabase.auth.signInWithOAuth({ + provider: 'apple', + }) + ``` -### Configuration [#configuration-web] + This call takes the user to Apple's consent screen. Once the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session. -You will require the following information: + ### Configuration [#configuration-web] -1. Your Apple Developer account's **Team ID**, which is an alphanumeric string of 10 characters that uniquely identifies the developer of the app. It's often easily accessible in the upper right-side menu on the Apple Developer Console. -2. Register email sources for _Sign in with Apple for Email Communication_ which can be found in the [Services](https://developer.apple.com/account/resources/services/list) section of the Apple Developer Console. -3. An **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple once you create an App ID in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) -4. A **Services ID** which uniquely identifies the web services provided by the app you registered in the previous step. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.web`. -5. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your Supabase project is hosted on. This is usually `.supabase.co` while the redirect URL is `https://.supabase.co/auth/v1/callback`. -6. Create a signing **Key** in the [Keys](https://developer.apple.com/account/resources/authkeys/list) section of the Apple Developer Console. You can use this key to generate a secret key using the tool below, which is added to your Supabase project's Auth configuration. Make sure you safely store the `AuthKey_XXXXXXXXXX.p8` file. If you ever loose access to it, or make it public accidentally please revoke it from the Apple Developer Console and create a new one immediately. You will have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring meeting in your calendar! -7. Finally, add the information you configured above to the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers). + You will require the following information: - - Use this tool to generate a new Apple client secret. No keys leave your browser! - + 1. Your Apple Developer account's **Team ID**, which is an alphanumeric string of 10 characters that uniquely identifies the developer of the app. It's often easily accessible in the upper right-side menu on the Apple Developer Console. + 2. Register email sources for _Sign in with Apple for Email Communication_ which can be found in the [Services](https://developer.apple.com/account/resources/services/list) section of the Apple Developer Console. + 3. An **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple once you create an App ID in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) + 4. A **Services ID** which uniquely identifies the web services provided by the app you registered in the previous step. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.web`. + 5. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your Supabase project is hosted on. This is usually `.supabase.co` while the redirect URL is `https://.supabase.co/auth/v1/callback`. + 6. Create a signing **Key** in the [Keys](https://developer.apple.com/account/resources/authkeys/list) section of the Apple Developer Console. You can use this key to generate a secret key using the tool below, which is added to your Supabase project's Auth configuration. Make sure you safely store the `AuthKey_XXXXXXXXXX.p8` file. If you ever loose access to it, or make it public accidentally please revoke it from the Apple Developer Console and create a new one immediately. You will have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring meeting in your calendar! + 7. Finally, add the information you configured above to the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers). - + + Use this tool to generate a new Apple client secret. No keys leave your browser! + -## Using native sign in + -Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Apple flow on iOS, macOS, watchOS or tvOS uses the [operating system's built-in functionalities](https://developer.apple.com/documentation/authenticationservices) to prompt the user for consent. + ## Using Sign in with Apple JS -When the user provides consent, Apple issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth. + [Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) is an official Apple framework for authenticating Apple users on websites. Although it can be used in web-based apps, those use cases will benefit more with the OAuth flow described above. We recommend using this method on classic websites only. -If you are building an iOS or macOS app using Flutter, you can use the [signInWithApple()](/docs/reference/dart/sign-in-with-apple) method to perform Apple sign in: + You can use the `signInWithIdToken()` method from the Supabase JavaScript library on the website to obtain an access and refresh token once the user has given consent using Sign in with Apple JS: -```dart -import 'package:supabase_flutter/supabase_flutter.dart'; + ```ts + function signIn() { + const data = await AppleID.auth.signIn() -final AuthResponse res = await supabase.auth.signInWithApple(); -final User? user = res.user; -``` + await supabase.auth.signInWithIdToken({ + provider: 'apple', + token: data.id_token, + nonce: '', + }) + } + ``` -In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so: + Alternatively, you can use the `AppleIDSignInOnSuccess` event with the `usePopup` option: -```ts -await supabase.auth.signInWithIdToken({ - provider: 'apple', - token: '', -}) -``` + ```ts + // Listen for authorization success. + document.addEventListener('AppleIDSignInOnSuccess', async (event) => { + await supabase.auth.signInWithIdToken({ + provider: 'apple', + token: event.data.id_token, + nonce: '', + }) + }) + ``` -Please take a look at these open-source projects which may help you obtain an ID token directly from the OS: + Please make sure you request for the scope `name email` when initializing the library. -- [invertase/react-native-apple-authentication](https://github.com/invertase/react-native-apple-authentication) -- [Expo AppleAuthentication](https://docs.expo.dev/versions/latest/sdk/apple-authentication/) + ### Configuration [#configuration-apple-js] -For apps written in Swift, please consult the [community maintained library](/docs/reference/swift/introduction). + To use Sign in with Apple JS you need to configure these options: -### Configuration [#configuration-native-app] + 1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) + 2. Obtain a **Services ID** attached to the App ID that uniquely identifies the website. Use this value as the client ID when initializing Sign in with Apple JS. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.website`. + 3. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your website is hosted on. The redirect URL must also point to a page on your website that will receive the callback from Apple. + 4. Register the Services ID you created to your project's [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_. -Native sign in requires less configuration steps than OAuth flow. You will need to perform these steps: + + If you're using Sign in with Apple JS you do not need to configure the OAuth settings. + -1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) -2. Register all of the App IDs that will be using your Supabase project in the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_. + -Note that if you're building a native app only, you do not need to setup the OAuth flow. + -## Using Sign in with Apple JS + ## Using Native Sign in with Apple in Expo -[Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) is an official Apple framework for authenticating Apple users on websites. Although it can be used in web-based apps, those use cases will benefit more with the OAuth flow described above. We recommend using this method on classic websites only. + When working with Expo, you can use the [Expo AppleAuthentication](https://docs.expo.dev/versions/latest/sdk/apple-authentication/) library to obtain and ID token that you can pass to supabase-js [`signInWithIdToken` method](/docs/reference/javascript/auth-signinwithidtoken). -You can use the `signInWithIdToken()` method from the Supabase JavaScript library on the website to obtain an access and refresh token once the user has given consent using Sign in with Apple JS: + Follow the [Expo docs](https://docs.expo.dev/versions/latest/sdk/apple-authentication/#installation) for installation and configuration instructions. See the [supabase-js reference](/docs/reference/javascript/initializing?example=react-native-options-async-storage) for instructions on initializing the supabase-js client in React Native. -```ts -function signIn() { - const data = await AppleID.auth.signIn() + ```tsx ./components/Auth.native.tsx + import { Platform } from 'react-native' + import * as AppleAuthentication from 'expo-apple-authentication' + import { supabase } from 'app/utils/supabase' - await supabase.auth.signInWithIdToken({ - provider: 'apple', - token: data.id_token, - nonce: '', - }) -} -``` + export function Auth() { + if (Platform.OS === 'ios') + return ( + { + try { + const credential = await AppleAuthentication.signInAsync({ + requestedScopes: [ + AppleAuthentication.AppleAuthenticationScope.FULL_NAME, + AppleAuthentication.AppleAuthenticationScope.EMAIL, + ], + }) + // Sign in via Supabase Auth. + if (credential.identityToken) { + const { + error, + data: { user }, + } = await supabase.auth.signInWithIdToken({ + provider: 'apple', + token: credential.identityToken, + }) + console.log(JSON.stringify({ error, user }, null, 2)) + if (!error) { + // User is signed in. + } + } else { + throw new Error('No identityToken.') + } + } catch (e) { + if (e.code === 'ERR_REQUEST_CANCELED') { + // handle that the user canceled the sign-in flow + } else { + // handle other errors + } + } + }} + /> + ) + return <>{/* Implement Android Auth options. */} + } + ``` -Alternatively, you can use the `AppleIDSignInOnSuccess` event with the `usePopup` option: + When working with bare React Native, you can use [invertase/react-native-apple-authentication](https://github.com/invertase/react-native-apple-authentication) to obtain the ID token. -```ts -// Listen for authorization success. -document.addEventListener('AppleIDSignInOnSuccess', async (event) => { - await supabase.auth.signInWithIdToken({ - provider: 'apple', - token: event.data.id_token, - nonce: '', - }) -}) -``` + ### Configuration [#expo-configuration-native-app] -Please make sure you request for the scope `name email` when initializing the library. + + When testing with Expo Go, the Expo App ID `host.exp.Exponent` will be used. Make sure to add this to the "Authorized Client IDs" list in your [Supabase dashboard Apple provider configuration](https://supabase.com/dashboard/project/_/auth/providers)! + -### Configuration [#configuration-apple-js] + 1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) + 2. Register all of the App IDs that will be using your Supabase project in the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_. -To use Sign in with Apple JS you need to configure these options: + + If you're building a native app only, you do not need to configure the OAuth settings. + -1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) -2. Obtain a **Services ID** attached to the App ID that uniquely identifies the website. Use this value as the client ID when initializing Sign in with Apple JS. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.website`. -3. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your website is hosted on. The redirect URL must also point to a page on your website that will receive the callback from Apple. -4. Register the Services ID you created to your project's [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_. + -Note that if you're using Sign in with Apple JS you do not need to configure the OAuth settings. + + + ## Using Native Sign in with Apple in Flutter + + Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Apple flow on iOS, macOS, watchOS or tvOS uses the [operating system's built-in functionalities](https://developer.apple.com/documentation/authenticationservices) to prompt the user for consent. + + When the user provides consent, Apple issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth. + + If you are building an iOS or macOS app using Flutter, you can use the [signInWithApple()](/docs/reference/dart/sign-in-with-apple) method to perform Apple sign in: + + ```dart + import 'package:supabase_flutter/supabase_flutter.dart'; + + final AuthResponse res = await supabase.auth.signInWithApple(); + final User? user = res.user; + ``` + + ### Configuration [#flutter-configuration-native-app] + + 1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) + 2. Register all of the App IDs that will be using your Supabase project in the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_. + + + If you're building a native app only, you do not need to configure the OAuth settings. + + + + + + + ## Using Native Sign in with Apple in Swift + + For apps written in Swift, follow the [Apple Developer docs](https://developer.apple.com/documentation/sign_in_with_apple/implementing_user_authentication_with_sign_in_with_apple) for obtaining the ID token and then pass it to the [Swift client's `signInWithIdToken`](https://github.com/supabase-community/gotrue-swift/blob/main/Examples/Shared/Sources/SignInWithAppleView.swift#L36) method. + + ```swift + import SwiftUI + import AuthenticationServices + import Supabase + @_spi(Experimental) import GoTrue + + struct SignInView: View { + let client = SupabaseClient(supabaseURL: URL(string: "your url")!, supabaseKey: "your anon key") + + var body: some View { + SignInWithAppleButton { request in + request.requestedScopes = [.email, .fullName] + } onCompletion: { result in + Task { + do { + guard let credential = try result.get().credential as? ASAuthorizationAppleIDCredential + else { + return + } + + guard let idToken = credential.identityToken + .flatMap({ String(data: $0, encoding: .utf8) }) + else { + return + } + try await client.auth.signInWithIdToken( + credentials: .init( + provider: .apple, + idToken: idToken + ) + ) + } catch { + dump(error) + } + } + } + .fixedSize() + } + } + ``` + + ### Configuration [#swift-configuration-native-app] + + 1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) + 2. Register all of the App IDs that will be using your Supabase project in the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_. + + + If you're building a native app only, you do not need to configure the OAuth settings. + + + + export const Page = ({ children }) => diff --git a/apps/docs/pages/guides/getting-started.mdx b/apps/docs/pages/guides/getting-started.mdx index 9014e2c4257..0097c94bbb9 100644 --- a/apps/docs/pages/guides/getting-started.mdx +++ b/apps/docs/pages/guides/getting-started.mdx @@ -276,10 +276,10 @@ export const mobile = [ icon: '/docs/img/icons/flutter-icon', }, { - title: 'Expo', - href: '/guides/getting-started/tutorials/with-expo', + title: 'Expo React Native', + href: '/guides/getting-started/tutorials/with-expo-react-native', description: - 'Learn how to build a user management app with Expo and Supabase Database, Auth, and Storage functionality.', + 'Learn how to build a user management app with Expo React Native and Supabase Database, Auth, and Storage functionality.', icon: '/docs/img/icons/expo-icon', }, { diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-expo-react-native.mdx similarity index 98% rename from apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx rename to apps/docs/pages/guides/getting-started/tutorials/with-expo-react-native.mdx index 4db5073e0a7..846385d21f4 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-expo-react-native.mdx @@ -1,7 +1,7 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - title: 'Build a User Management App with Expo', + title: 'Build a User Management App with Expo React Native', description: 'Learn how to use Supabase in your React Native App.', } @@ -92,8 +92,9 @@ These variables will be exposed on the browser, and that's completely fine since Implement a `LargeSecureStore` class to pass in as Auth storage for the `supabase-js` client: ```ts lib/supabase.ts - import { createClient } from '@supabase/supabase-js' - import AsyncStorage from '@react-native-async-storage/async-storage'; + import "react-native-url-polyfill/auto"; + import { createClient } from "@supabase/supabase-js"; + import AsyncStorage from "@react-native-async-storage/async-storage"; import * as SecureStore from 'expo-secure-store'; import * as aesjs from 'aes-js'; import 'react-native-get-random-values'; diff --git a/apps/www/data/Examples.json b/apps/www/data/Examples.json index 325dff587d7..7a0afec08f1 100644 --- a/apps/www/data/Examples.json +++ b/apps/www/data/Examples.json @@ -41,7 +41,7 @@ { "type": "example", "products": ["database"], - "title": "Expo Starter", + "title": "Expo React Native Starter", "description": "Template bottom tabs with auth flow (Typescript)", "author": "codingki", "author_url": "https://github.com/codingki", diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js index ea2d46573fb..b909d53d7fb 100644 --- a/apps/www/lib/redirects.js +++ b/apps/www/lib/redirects.js @@ -1715,7 +1715,12 @@ module.exports = [ { permanent: true, source: '/docs/guides/with-expo', - destination: '/docs/guides/getting-started/tutorials/with-expo', + destination: '/docs/guides/getting-started/tutorials/with-expo-react-native', + }, + { + permanent: true, + source: '/docs/guides/getting-started/tutorials/with-expo', + destination: '/docs/guides/getting-started/tutorials/with-expo-react-native', }, { permanent: true, diff --git a/spec/examples/examples.yml b/spec/examples/examples.yml index 4960b1f29a5..c9a1c668f36 100644 --- a/spec/examples/examples.yml +++ b/spec/examples/examples.yml @@ -96,6 +96,7 @@ functions: name: React Native options js: | ```js + import 'react-native-url-polyfill/auto' import { createClient } from '@supabase/supabase-js' import AsyncStorage from "@react-native-async-storage/async-storage"; diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index ec93bdc1d19..0f8f8dd9828 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -98,6 +98,7 @@ functions: name: React Native options with AsyncStorage code: | ```js + import 'react-native-url-polyfill/auto' import { createClient } from '@supabase/supabase-js' import AsyncStorage from "@react-native-async-storage/async-storage"; @@ -116,6 +117,7 @@ functions: name: React Native options with Expo SecureStore code: | ```js + import 'react-native-url-polyfill/auto' import { createClient } from '@supabase/supabase-js' import AsyncStorage from '@react-native-async-storage/async-storage'; import * as SecureStore from 'expo-secure-store';