Nos réalisationsBlogGlossaire

Utiliser expo-auth-session via Facebook (Expo Managed Workflow | Expo GO/Standalone app/expo-dev-client | EAS BUILD)

author
Andréas Hanss · Apr 12, 2022
dev | 5 min
Image descriptive

Sommaire

Vous souhaitez implémenter une connexion OAuth2 avec Facebook et expo.io ? Vous êtes au bon endroit !

Pourquoi cet article existe ?

Les APIs d'authentification OAUth2 pour Facebook et Google étant maintenant dépréciées, Expo nous invite à utiliser la nouvelle implémentation à base du Web Browser nommée expo-auth-session.

Cependant, force est de constater que cela ne marche pas encore très bien dans tous les contextes.

En effet quand vous utilisez Expo GO le client pré-compilé pour Expo cela fonctionne plutôt bien mais dès que l'on créé une app Standalone cela peut vite se compliquer, principalement sur Android et on fini par s'arracher les cheveux.

Plusieurs topics sont d'ailleurs à l'heure où j'écris cette article entrain de signaler divers problèmes liés à expo-auth-session (SDK44 Expo)

Après moultes recherches et expérimentations j'en suis arrivé à trouver une solution plutôt correcte qui corrige deux problèmes, afin d'avoir un login Facebook fonctionnel sur IOS et Android en Workflow Managed pour des applications créés avec eas-build en standalone ou expo-dev-client.

Mais avant voyons un peu plus en détail le fonctionnement de expo-auth-session.

Comment ça marche expo-auth-session ?

expo-auth-session est une librarie qui a vocation à nous simplifier la vie pour une autorisation OAuth2 avec divers fournisseurs supportés, parmis lesquels Google et Facebook.

Elle fournie des primitives via une API simple qui va entre-autres permettre d'ouvrir un navigateur dans notre application qui utilise les cookies du navigateur système (afin de profiter du fait que l'on est peut-être déjà connecté au service en question).

Une fois que l'utilisateur valide les permissions la librairie va gérer la redirection du service tier et traiter les données de retour afin de récupérer un jeton d'authentification, un ID utilisateur et tout ce qui pourrait nous servir dans le cadre d'une démarche de connexion OAuth2. Avec ce jeton d'authentification on peut ensuite consommer une API tierce afin de récupérer des données client.

Comme on l'a vu c'est pratique et sur Expo GO ça marche plutôt bien, par contre sur une application standalone qui n'a pas toute la configuration au milimètre comme dans Expo GO, c'est parfois plus compliqué, notamment sur Android.

Pas de panique : ci-dessous un workflow fonctionnel et très simple à implémenter.

Un workflow expo-auth-session complet et fonctionnel avec Facebook pour ExpoGO ET Android/IOS standalone (EAS BUILD)

Testé sur expo SDK 44 avec les packages suivants :

1
{
2
  "expo": "~44.0.0",
3
  "expo-app-loading": "~1.3.0",
4
  "expo-auth-session": "~3.5.0",
5
  "expo-constants": "~13.0.1",
6
  "expo-dev-client": "~0.8.4",
7
  "expo-random": "~12.1.1",
8
  "expo-status-bar": "~1.2.0",
9
  "expo-updates": "~0.11.6"
10
}

1 - installer expo-auth-session & deps

expo install expo-auth-session expo-random

(plus de détails)

2 - Définir un scheme pour le deeplinking vers son app.

1
// app.json or equivalent
2
{
3
  "expo": {
4
    "scheme": "codingspark" // Allows to deeplink to codingspark://
5
  }
6
}

3 - Configurer l'application Facebook Developer

Aller dans la configuration de son application Facebook (en créer une si on en n'en pas) et dans la section Facebook Login mettre l'URL vers le expo auth link.

Cette URL est construite en deux parties https://auth.expo.io/ et votre originalFullName qui est la sommes du username et du slug de l'app.

Exemple: 

https://auth.expo.io/@codingspark/jerry

Pour récupérer votre originalFullName vous pouvez utiliser la commande suivante dans le dossier root de votre projet :

expo config --type public | grep "originalFullName"

Ensuite on vérifie qu'on est bien dans cet état et on valide !

description

Maintenant on passe à la meilleure partie…

4 - Un petit hack code !

La première chose à noter est qu'on a un bug sur EAS build actuellement et qui ne sera peut-être plus d'actualité au moment où vous lirez cet article (n'hésitez pas à me MP pour me le signaler si tel est le cas).

Pour cela il faut surcharger le originalFullName comme ci-dessous, quelques part au démarrage de l'app, sans quoi on aura une erreur à l'utilisation de useProxy: true. Vous pouvez consulter les topics en début d'article pour suivre l'avancement sur ces bugs.

1
// Somewhere at application root like App.tsx
2
// https://github.com/expo/expo/issues/13714 to counter this issue
3
import Constants from "expo-constants";
4
Constants.manifest!.originalFullName = "@<teamname/username>/<slug>";

Le deuxième problème est un problème de redirections qui ne marche pas et qui font soit crash l'app, soit d'autres comportements étranges et qui juste ne marche pas.

Ici la solution consiste à toujours utiliser les liens auth.expo.io qui ont plusieurs bénéfices

pour se faire il faut combiner useProxy: true et une redirectURL définie à la main qui va générer le lien en auth.expo.io TOUT LE TEMPS.

1
import Constants from "expo-constants";
2
import * as Facebook from "expo-auth-session/providers/facebook";
3
import * as AuthSession from "expo-auth-session";
4


5
export const HomeScreen: React.FC = () => {
6
  const [, response, prompt] = Facebook.useAuthRequest(
7
    {
8
      clientId: "<facebook_app_id>", // Must be defined in JavaScript, won't use app.json values.
9
      redirectUri: AuthSession.makeRedirectUri({ useProxy: true }), // useProxy here…
10
    },
11
    { useProxy: true } // …and also here
12
  );
13


14
 return <AppButton onPress={() => prompt()} title="Login with FB" />
15
}

On récupère ensuite le jeton d'authentification dans la variable response, qui nous permet par exemple d'interroger l'API Facebook.

https://graph.facebook.com/me?fields=first_name,last_name,email,picture.type(large)&access_token=${response.authentication.accessToken}

And VOILÀ avec tout cela vous devriez être tranquille en attendant que Expo démocratise un peu l'utilisation de ce module.