In this guide we are going to implement the Faable Auth authentication service in React Native. The Identity Provider enables us to log in using Google, Facebook/Meta, Github, Shopify, Slack, among others, with a single configuration.
⚠️ Before starting:
Make sure you have the simulator installed according to the platform you are developing on, ios or Android.
Use your favorite code editor, in this case we will use VSCode.
🚀 Start
Open a new terminal to create a new project.
npxcreate-expo-app--template
Complete the installation questions.
Choose “Blank (TypeScript)”
Name your app
Wait for npm to install packages
$ npx create-expo-app --templateNeed to install the following packages:create-expo-app@2.3.1Ok to proceed? (y) y✔ Choose a template: › Blank (TypeScript)✔ What is your app named? … faable-login-expo✔ Downloaded and extracted project files.> npm installadded 1243 packages, and audited 1244 packages in 30s✅ Your project is ready!To run your project, navigate to the directory and run one of the following npm commands.- cd faable-login-expo- npm run android- npm run ios- npm run web
Once the installation is complete, we run the project to check that everything is working correctly.
⚠️ IMPORTANT: You must define which social connection you are going to use to log in. You will find the connection IDs in the dashboard. The connection IDs have this format connection_xxxxxxxxxxxxxxxxxxxxxx
We define a global context for the entire application in the main project file App.tsx. Configure the context by passing as a prop the instance of faableauth that we have previously configured.
Return to the LoginButton.tsx file to place the needed logic that allows us to display the user's information when the user has completed the login flow. To do this, we will use the useSession() hook provided with our helper library @faable/auth-helpers-react that allows us to access the session and user data.