Edited at

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

More than 1 year has passed since last update.


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

firebase

https://firebase.google.com

Google提供のアプリ用バックエンド。

Auth0

https://auth0.com

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

react-native-lock

https://github.com/auth0/react-native-lock

Auth0の公式ライブラリ。

後述しますが、まだドキュメントが古かったり、ログイン画面のカスタマイズなどができなかったりします。

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


チュートリアル

https://auth0.com/docs/quickstart/native/react-native-ios


firebaseへログイン

lock.show({}, (err, profile, token) => {

console.log('Logged in!');
firebase.auth().signInWithCustomToken(token.idToken);
});

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

https://auth0.com/docs/tokens/delegation

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がエラー

https://auth0.com/authenticate/react-native-ios/firebase

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


Andoridのビルドでエラー

https://github.com/auth0/react-native-lock#manually-1

rnpm link react-native-lock

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


iOSのReleaseビルドだけエラー

Xcodeで

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

というエラーが出ます

https://github.com/auth0/react-native-lock/issues/70

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.


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

たぶん、この2つのビルドエラーは、

react-native link react-native-lock

を使っておけば解決したのだと思います。

https://auth0.com/docs/quickstart/native/react-native-ios

↑の公式ドキュメントでは、

rnpm link react-native-lock

となってたので、ハマってしまいました。

https://github.com/auth0/react-native-lock

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


感想

いろいろハマりましたが、わりと簡単にログイン処理ができるのは間違いないです。

他のプラットフォーム版のように、ログイン画面のカスタマイズもできるようになることに期待。