Auth0+firebase+react nativeでログイン認証

#利用するサービス、ライブラリ

firebase
https://firebase.google.com
Google提供のアプリ用バックエンド。

Auth0
https://auth0.com
各サービスごとに実装するとかなり手間がかかるログイン処理を簡単に使えるサービス。

react-native-lock
https://github.com/auth0/react-native-lock
Auth0の公式ライブラリ。
後述しますが、まだドキュメントが古かったり、ログイン画面のカスタマイズなどができなかったりします。

簡単にできるかと思いきや、けっこうハマったので、メモを作っておきます。

#チュートリアル

#firebaseへログイン

lock.show({}, (err, profile, token) => {
  console.log('Logged in!');
  firebase.auth().signInWithCustomToken(token.idToken);
});

ログイン画面の表示までは、わりと簡単にできたけれど、firebaseに渡す、idTokenがこれでは、通らない。

Delegationというのをしないといけないらしい。
react-native-lockにその機能はないみたい。

Auth0のdelgation API
https://auth0.com/docs/api/authentication#delegation

POST https://calil.auth0.com/delegation
Content-Type: 'application/json'
{
  "client_id": "YOUR_CLIENT_ID",
  "grant_type": "urn:ietf:params:oauth:grant-type:jwt-bearer",
  "id_token" or "refresh_token" : "TOKEN",
  "target": "TARGET_CLIENT_ID",
  "scope": "openid",
  "api_type": "API_TYPE"
}

これを叩く必要がある。
実際のコード。

import request from 'superagent';
lock.show({}, (err, profile, token) => {
  if (err) return alert(err);
  // Authentication worked!
  // console.log('Logged in with Auth0!');
  // console.log(token);
  const url = 'https://{your-id}.auth0.com/delegation';
  request.post(url).send({
    client_id: '{YOUR_CLIENT_ID}',
    grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer',
    refresh_token: token.refreshToken,
    scope: 'open_id',
    api_type: 'firebase',
  }).end((err, res) => {
    // console.log(err);
    // console.log(res);
    if (!err) {
      firebase.auth().signInWithCustomToken(res.body.id_token)
      .catch(error => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        alert(errorMessage);
      });
    }
  });

#delgationがエラー

こちらの手順で、dashboardでfirebaseのキーなどの設定が必要です。

#Andoridのビルドでエラー

rnpm link react-native-lock

だけでは、足りないようで、↑のmanuallyで不足部分を足す必要があります。

#iOSのReleaseビルドだけエラー

Xcodeで
ld: warning: directory not found for option '-L

というエラーが出ます

If not, try right clicking on Libraries, select "Add Files To..." and go under /ios/Pods/ and select Pods.xcodeproj. The problem for me was that XCode didn't know where to find all those libraries.

#公式のチュートリアルが古い問題

たぶん、この２つのビルドエラーは、
react-native link react-native-lock
を使っておけば解決したのだと思います。

https://auth0.com/docs/quickstart/native/react-native-ios
↑の公式ドキュメントでは、
rnpm link react-native-lock
となってたので、ハマってしまいました。

こちらのドキュメントの手順を踏むべきでした。

#感想

いろいろハマりましたが、わりと簡単にログイン処理ができるのは間違いないです。
他のプラットフォーム版のように、ログイン画面のカスタマイズもできるようになることに期待。