cp716716
@cp716716

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

【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の設定がうまくできていないように感じます。

丸一日試行錯誤してみましたが、解決できないため、
アドバイスをいただけないでしょうか。

【登録画面】(メールアドレスを入力し送信ボタンを押すとエラー発生)
IMG_3591.PNG

【console.log出力エラー】
スクリーンショット 2023-01-15 22.46.52.png

【メールリンク有効設定】
スクリーンショット 2023-01-15 22.21.18.png

【Dynamic Links設定①】
スクリーンショット 2023-01-15 22.19.51.png

【Dynamic Links設定②】
スクリーンショット 2023-01-15 22.19.22.png

【Dynamic Links設定③】
スクリーンショット 2023-01-15 22.16.42.png

【承認済みドメイン設定】
スクリーンショット 2023-01-15 22.20.54.png

該当のコード

【登録画面】

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

No Answers yet.

Your answer might help someone💌