From 3f3c30acd38710c17fc9f6389236dc922d3702e5 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Sat, 24 Jun 2023 01:22:58 +0530 Subject: [PATCH] [docs] Update Using Facebook authentication guide (#22838) # Why Closes ENG-8774 # How By removing the info about using AuthSession API and replacing it with using `react-native-fbsdk-next` which is native wrapper around Facebook's Android and iOS SDKs. Other changes: - Update `title` and `description` to reflect the changes - Add instructions on how to configure Android apps before one create Facebook project and start to integrate Facebook auth # Test Plan Changes can tested by running docs locally and visiting: http://localhost:3002/guides/facebook-authentication/ CleanShot 2023-06-12 at 16 19 45@2x # Checklist - [x] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [x] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Brent Vatne --- docs/pages/guides/facebook-authentication.mdx | 330 ++---------------- .../authentication/android-package-error.png | Bin 0 -> 41524 bytes .../android-required-fields.png | Bin 0 -> 91979 bytes .../authentication/facebook-app-settings.jpg | Bin 174346 -> 0 bytes .../facebook-login-settings.jpg | Bin 269414 -> 0 bytes 5 files changed, 37 insertions(+), 293 deletions(-) create mode 100644 docs/public/static/images/authentication/android-package-error.png create mode 100644 docs/public/static/images/authentication/android-required-fields.png delete mode 100644 docs/public/static/images/authentication/facebook-app-settings.jpg delete mode 100644 docs/public/static/images/authentication/facebook-login-settings.jpg diff --git a/docs/pages/guides/facebook-authentication.mdx b/docs/pages/guides/facebook-authentication.mdx index 236df19f0d2e3..2fa766a65711a 100644 --- a/docs/pages/guides/facebook-authentication.mdx +++ b/docs/pages/guides/facebook-authentication.mdx @@ -1,316 +1,60 @@ --- -title: Authentication with Facebook and AuthSession API -sidebar_title: Use Facebook authentication -description: A guide on setting up and using Facebook authentication with AuthSession API in your Expo app. +title: Use Facebook authentication +description: A guide on using react-native-fbsdk-next library to integrate Facebook authentication in your Expo project. --- -import { Terminal } from '~/ui/components/Snippet'; -import { Tabs, Tab } from '~/ui/components/Tabs'; -import { Collapsible } from '~/ui/components/Collapsible'; +import { BoxLink } from '~/ui/components/BoxLink'; import ImageSpotlight from '~/components/plugins/ImageSpotlight'; -import { Step } from '~/ui/components/Step'; -AuthSession API allows [browser-based authentication](/versions/latest/sdk/auth-session/#how-web-browser-based-authentication-flows-work) (using OAuth or OpenID Connect) to your project for Android, iOS, and the web. This guide provides steps on configuring and using the API with Facebook and a [development build](/develop/development-builds/create-a-build/). +The [`react-native-fbsdk-next`](https://github.com/thebergamo/react-native-fbsdk-next/) library provides a wrapper around Facebook's Android and iOS SDKs. It allows integrating Facebook authentication into your Expo project and provide access to native components. - +This guide provides additional information on configuring the library with Expo for Android. -## Install libraries +## Prerequisites -To use AuthSession API, you'll need to install the following packages in your project: +The `react-native-fbsdk-next` library can't be used in the Expo Go app because it requires custom native code. Learn more about [adding custom native code to your app](/workflow/customizing/). - +## Installation - +See `react-native-fbsdk-next` documentation for instructions on how to install and configure the library: -If you're using SDK 47 or below, you'll need to install `expo-random` instead of `expo-crypto` package: - - - -`expo-random` is deprecated from SDK 48 and above and is replaced by `expo-crypto`. - - - - - - -## Add a scheme - -For a development build and when setting up production apps, define [`scheme`](/versions/latest/config/app/#scheme) in the **app.json**. It is required for the authentication flow to complete the process and redirect the user back to the app. It handles the process of deep linking back to the app. - -```json app.json -{ - "expo": { - "scheme": "yourscheme" - } -} -``` - -If you do not provide a value for the `scheme`, the authentication flow will complete, however, the user will not be redirected back to the app. They will have to manually exit the authentication popup which will result in the rejection of the process. - -#### Android only - -For Android, you'll need to add a scheme that contains the app ID as a prefix. Facebook requires this scheme to be able to redirect the user back to the app after the authentication process is complete. - -For example, if your app ID is `1234567890`, then the scheme will be `fb1234567890`. Modify the `scheme` in app config and convert it to an array if you have more than one custom scheme to add this scheme: - -```json app.json -{ - "expo": { - "scheme": ["yourscheme", "fb1234567890"] - } -} -``` - - - - - -## Create a Facebook app - -To use Facebook authentication, you'll need to create a Facebook app, enable the Facebook login product and get the app ID. - -- Go to [developers.facebook.com/apps](https://developers.facebook.com/apps/) and click the **Create App** button. -- After the Facebook app is created, you'll be redirected to the app dashboard that shows a list of products. -- Browse through the list and select **Facebook for Login**. Click **Set up**. This will open **Facebook Login Settings**. -- Under **Client OAuth settings**, enable **Embedded Browser OAuth Login**. -- Under **Valid OAuth Redirect URIs**, add the redirect string of the following format: - -```shell -scheme://expo-development-client/?url={manifestUrl} - -# Example -yourscheme://expo-development-client/?url=https://u.expo.dev/[your-eas-build-project-id]?channel-name=[channel-name] -``` - -- Replace `scheme` with the one you defined in the previous step. To learn what goes in the `manifestUrl` parameter, read the [development workflows](/develop/development-builds/development-workflows/#deep-linking-urls) section. Click **Save changes**. - - - -- Navigate to **Settings > Basic**, add a **Privacy Policy URL** for your app and click **Save changes**. This will help you get advance access (if required) for **public_profile** permission. - - - -- Also, copy the **App ID** as shown in the above screenshot. You'll need it in the next step. - - - -## Using AuthSession API - - - -### Add import statements - -Add the following import statements to your project code. The `WebBrowser` API, `AuthSession` API, and the `Facebook` provider from the `expo-auth-session` are essential to handle the authentication process. - -```js App.js -import * as AuthSession from 'expo-auth-session'; -import * as Facebook from 'expo-auth-session/providers/facebook'; -import * as WebBrowser from 'expo-web-browser'; -``` - - - - - -### Add a method to dismiss the web popup - -Expo's [WebBrowser API](/versions/latest/sdk/webbrowser/) provides `maybeCompleteAuthSession()` method to dismiss the popup when the authentication sessions are completed successfully. It uses the redirect URL added in the provider's authorized list of URLs. - -Invoke this method to the app screen you want to redirect back to by adding the following code snippet: - -```js App.js -WebBrowser.maybeCompleteAuthSession(); -``` - -If this method is not invoked, the popup will not dismiss itself. - - - - - -### Pass the client ID to the provider - -[`Facebook.useAuthRequest()`](/versions/latest/sdk/auth-session/#useauthrequest-1) hook provides `request` and `response` objects. It allows for async setup, which means that a mobile web browser won't block the request. It also accepts an object of client IDs that are generated in the Facebook app. - -Define this hook inside the React component by adding the code snippet below: - -{/* prettier-ignore */} -```js App.js -export default function App() { - const [request, response, promptAsync] = Facebook.useAuthRequest({ - clientId: "FB_APP_ID", - }); - /* @hide ... */ /* @end */ -} -``` - -In the above code snippet, replace the `FB_APP_ID` with the client ID generated in the Facebook app. - - - - - -### Send the auth request - -`useAuthRequest()` hook also provides `promptAsync()` that prompts the user to authenticate by opening a web browser. It is invoked when the user clicks the login button. The button must be disabled until the request is loaded asynchronously. This is done by passing the `request` object from the `useAuthRequest` hook to the `disabled` prop of the button component. - -An example button component that invokes `promptAsync()` is shown below: - -```jsx App.js -