【React Native + Expo + Firebase】メールリンクの送信ができない
Qiita初心者です。
誤字脱字、至らない点があるかもしれませんがよろしくお願いします。
解決したいこと
「React Native + Expo + Firebase」を使用しアプリ開発をしています。
その中で、Firebaseでのアカウント登録機能を使用し、
「メールリンク(パスワードなしでログイン)」機能を実装しようと試みていますが、
エラーが発生しメールの送信ができません。
コンソールへログを出力すると以下の表示があります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
auth/missing-continue-uri
A continue URL must be provided in the request.
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Dynamic Linksの設定がうまくできていないように感じます。
丸一日試行錯誤してみましたが、解決できないため、
アドバイスをいただけないでしょうか。
【登録画面】(メールアドレスを入力し送信ボタンを押すとエラー発生)
該当のコード
【登録画面】
TestScreen.jsx
import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, StyleSheet, TouchableOpacity, Alert, } from 'react-native';
import firebase from 'firebase'
import DrawerButton from '../components/DrawerButton';
import Button from '../components/Button';
import { translateErrors } from '../utils';
export default function SignUpScreen(props) {
useEffect(() => {
navigation.setOptions({
headerLeft: () => <DrawerButton />,
});
}, []);
const { navigation } = props;
const [email, setEmail] = useState('');
function actionCodeSettings() {
// [START auth_email_link_actioncode_settings]
console.log("sss")
var actionCodeSettings = {
// URL you want to redirect back to. The domain (www.example.com) for this
// URL must be in the authorized domains list in the Firebase Console.
url: 'https://babyapp1031.page.link/email',
// This must be true.
handleCodeInApp: true,
iOS: {
bundleId: 'com.example.ios'
},
android: {
packageName: 'com.example.android',
installApp: true,
minimumVersion: '12'
},
dynamicLinkDomain: 'babyapp1031.page.link'
};
// [END auth_email_link_actioncode_settings]
}
function emailLinkSend(email, actionCodeSettings) {
firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
.then(() => {
// The link was successfully sent. Inform the user.
// Save the email locally so you don't need to ask the user for it again
// if they open the link on the same device.
window.localStorage.setItem('emailForSignIn', email);
Alert.alert('登録メールを送信しました', 'メール内のリンクを開き、登録を完了させてください。', [{ text: 'OK' }], { cancelable: false })
// ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
// ...
console.log(errorCode)
console.log(errorMessage)
});
// [END auth_email_link_send]
}
return (
<View style={styles.container}>
<View style={styles.inner}>
<Text style={styles.title}>会員登録</Text>
<TextInput
style={styles.input}
value={email}
onChangeText={(text) => { setEmail(text); }}
autoCapitalize="none"
keyboardType="email-address"
placeholder="メールアドレス"
textContentType="emailAddress"
/>
<Button
label="送信"
onPress={() => emailLinkSend( email, actionCodeSettings )}
/>
<View style={styles.footer}>
<Text style={styles.footerText}>ログインは</Text>
<TouchableOpacity onPress={() => {
navigation.reset({
index: 0,
routes: [{ name: 'Acount' }],
});
}}>
<Text style={styles.footerLink}>こちら</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F0F4F8',
},
inner: {
paddingHorizontal: 27,
paddingVertical: 24,
},
title: {
fontSize: 24,
lineHeight: 32,
fontWeight: 'bold',
marginBottom: 24,
},
input: {
fontSize: 16,
height: 48,
borderColor: '#DDDDDD',
borderWidth: 1,
backgroundColor: '#ffffff',
paddingHorizontal: 8,
marginBottom: 16,
},
footerText: {
fontSize: 14,
lineHeight: 24,
marginRight: 8,
},
footerLink: {
fontSize: 14,
lineHeight: 24,
color: '#467FD3',
},
footer: {
flexDirection: 'row'
},
});
よろしくお願いいたします。
0