|
2 | 2 |
|
3 | 3 | > Check out the [Auth with Facebook](https://docs.expo.dev/guides/authentication/#facebook) docs.
|
4 | 4 |
|
5 |
| -Try it at https://expo.dev/@community/with-facebook-auth |
6 |
| - |
7 | 5 | ## How to use
|
8 | 6 |
|
9 | 7 | ### Running the app
|
10 | 8 |
|
11 | 9 | - Run `yarn` or `npm install`
|
12 | 10 | - Run `yarn start` or `npm run start` to try it out.
|
13 |
| -- Press "Open FB Auth" in the app and then check your logs. Take the `redirectUrl` that was logged and enter it into the "Valid OAuth redirect URIs" in your Facebook app configuration step below. |
| 11 | +- Press "Open FB Auth" in the app. |
14 | 12 |
|
15 | 13 | ### Setting up the Facebook app
|
16 | 14 |
|
17 |
| -- Follow the steps [described in the Facebook for Developers documentation](https://developers.facebook.com/docs/apps/register) |
18 |
| -- Add the "Facebook Login" product and configure it ([screenshot](https://i.imgur.com/CqHElwS.png)) |
19 |
| -- Make the app public ([screenshot](https://i.imgur.com/7RHDX87.png)) |
20 |
| -- Swap out the `FB_APP_ID` in `App.js` with your Facebook app's id. |
| 15 | +- Follow the steps [described in the Facebook for Developers documentation](https://developers.facebook.com/docs/apps/register). |
| 16 | +- Add the "Facebook Login" product and configure it ([screenshot](https://i.imgur.com/i1UAkIh.png)). |
| 17 | +- Under **Client OAuth settings**, enable **Embedded Browser OAuth Login**. |
| 18 | +- Under **Valid OAuth Redirect URIs**, add `https://auth.expo.io/@your-username/your-app-slug`. Replace `your-username` with your Expo account's username and `your-project-slug` with your project's slug. You can find the project's slug in the Expo config file on the [`slug`](/versions/latest/config/app/#slug) field. Click **Save changes**. |
| 19 | +- Make the app public ([screenshot](https://i.imgur.com/7m7iqcg.png)) |
| 20 | +- Swap out the `FB_APP_ID` in `App.js` with your Facebook app's ID. |
21 | 21 |
|
22 | 22 | ## The idea behind the example
|
23 | 23 |
|
24 | 24 | Expo provides a
|
25 |
| -[WebBrowser](https://docs.expo.dev/versions/latest/sdk/webbrowser.html) |
| 25 | +[WebBrowser](https://docs.expo.dev/versions/latest/sdk/webbrowser) |
26 | 26 | API that opens a SFSafariViewController or Chrome Custom Tab in a modal
|
27 | 27 | window. This provides a much better user experience than using a
|
28 | 28 | WebView, and it's more secure for your users because code cannot be
|
29 | 29 | injected into these browser windows. Additionally, they share cookies
|
30 | 30 | with the system browser, so there is no need to re-enter credentials if
|
31 | 31 | already authenticated. Expo also provides a wrapper around the `WebBrowser`
|
32 |
| -API which is called [AuthSession](https://docs.expo.dev/versions/latest/sdk/auth-session.html), |
| 32 | +API which is called [AuthSession](https://docs.expo.dev/versions/latest/sdk/auth-session), |
33 | 33 | which makes setting up an authentication flow using `WebBrowser` dead simple.
|
34 | 34 | This example demonstrates how to use the `AuthSession` API to sign in to
|
35 | 35 | Facebook.
|
0 commit comments