---
description: 每月可以免費寄送一萬個認證簡訊。
---

# Phone Auth

{% embed url="https://rnfirebase.io/auth/phone-auth" %}

{% embed url="https://v5.rnfirebase.io/docs/v5.x.x/auth/phone-auth" %}

1.記得先去 Firebase console 開啟 phone auth 服務。

![](https://2356031413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0u4DAqfidGmTt67qrG%2F-MWhuvrhJfxGSlnQuxfn%2F-MWhv8aaJwQD9vGS1XXZ%2F%E6%88%AA%E5%9C%96%202021-03-26%20%E4%B8%8B%E5%8D%885.45.18.png?alt=media\&token=7e7ed060-fc0d-4039-850a-3af6cb6a2a51)

> RN 跟 web 不同，不需要 initializeApp()

## iOS

2.加入 [URL scheme](https://stackoverflow.com/questions/61514076/firebase-phone-auth-getting-ios-error-register-custom-url-scheme) 到 `info.plist`

> open the GoogleService-Info.plist configuration file, and look for the REVERSED\_CLIENT\_ID key and add to info.plist

例如:

```
	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLName</key>
			<string></string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>com.googleusercontent.apps....-...</string>
			</array>
		</dict>
	</array>
```

[https://stackoverflow.com/questions/61514076/firebase-phone-auth-getting-ios-error-register-custom-url-scheme](https://stackoverflow.com/questions/61514076/firebase-phone-auth-getting-ios-error-register-custom-url-scheme)

3.可以到下方改變簡訊內容 (非必要)

![](https://2356031413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0u4DAqfidGmTt67qrG%2F-MWhvAYEwDDCjqTrLHC7%2F-MWhvX887DVImUB0sE5l%2F%E6%88%AA%E5%9C%96%202021-03-26%20%E4%B8%8B%E5%8D%885.46.59.png?alt=media\&token=eb6be126-7e5b-44d1-bd12-01fc2e7ea20e)

### 範例：

```javascript
import React, {useState} from 'react';
import auth from '@react-native-firebase/auth';
import {Text, View, TextInput, Button} from 'react-native';

function PhoneSignIn() {
  // If null, no SMS has been sent
  const [confirm, setConfirm] = useState(false);

  const [code, setCode] = useState('');

  // Handle the button press
  async function signInWithPhoneNumber(phoneNumber) {
    const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
    setConfirm(confirmation);
  }

  async function confirmCode() {
    try {
      let result = await confirm.confirm(code);
      console.log(result);
    } catch (error) {
      console.log('Invalid code.');
    }
  }

  if (!confirm) {
    return (
      <Button
        title="Phone Number Sign In"
        onPress={() => signInWithPhoneNumber('+886...')}
      />
    );
  }

  return (
    <>
      <Text>Phone Auth</Text>
      <TextInput
        style={{borderBottomWidth: 1, borderColor: 'black'}}
        value={code}
        onChangeText={text => setCode(text)}
      />
      <Button title="Confirm Code" onPress={() => confirmCode()} />
    </>
  );
}

const App = () => {
  return (
    <View style={{padding: '10%', paddingTop: '50%'}}>
      <Text style={{fontSize: 20, textAlign: 'center'}}>Phone Auth 範例</Text>
      <View>
        <PhoneSignIn />
      </View>
    </View>
  );
};

export default App;

```

之後你的手機會收到簡訊。

![](https://2356031413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0u4DAqfidGmTt67qrG%2F-MWhwuNfDaxlwrxx0Toj%2F-MWhxDZxPg1XQf--5eE9%2F%E6%88%AA%E5%9C%96%202021-03-26%20%E4%B8%8B%E5%8D%885.54.24.png?alt=media\&token=cae6c21d-2850-456d-ba5a-7e3e70111fa1)

Tip: 另外也可以新增測試用號碼，避免重複發送多次後被暫停使用

![](https://2356031413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0u4DAqfidGmTt67qrG%2F-MWi0IzugQPi6_9S5nxc%2F-MWi10VEpIU1t--dQ3fn%2F%E6%88%AA%E5%9C%96%202021-03-26%20%E4%B8%8B%E5%8D%886.15.22.png?alt=media\&token=34b1e2ee-3f33-4098-81ce-1f10746049d9)

## Android

> Androidn 流程稍微比較多

1.加入相關 Gradle script (app/build.gradle)

```javascript
dependencies {
    implementation 'androidx.browser:browser:1.3.0'
    implementation 'com.google.android.gms:play-services-safetynet:18.0.1'
    implementation platform('com.google.firebase:firebase-bom:29.3.1')
    implementation 'com.google.firebase:firebase-analytics'
```

[https://rnfirebase.io/#configure-firebase-with-android-credentials](https://rnfirebase.io/#configure-firebase-with-android-credentials)

2.加入 sha 指紋：

獲取 sha1, sha256 hash 後加入 firebase console

```
keytool -list -v -alias androiddebugkey -keystore ./android/app/debug.keystore
```

{% embed url="https://rnfirebase.io/#generating-android-credentials" %}

3\. 加入測試用電話

> 這邊加入後使用測試電話發簡訊時則不會實際收到簡訊，但如果沒加入測試電話每天只能發 50 個簡訊

#### 可能錯誤

1\.

```
Error: [auth/app-not-authorized] This app is not authorized to use Firebase Authentication. Please verify that the correct package name and SHA-1 are configured in the Firebase Console. [ A safety_net_token was passed, but no matching SHA-256 was registered in the Firebase console. Please make sure that this application’s packageName/SHA256 pair is registered in the Firebase Console. ]
```

這邊要確認下載 android/app 內的 debug.keystore 裡面的sha1, sha256 是不是就是這把 key的，有時會讀取到根目錄下的 \~/.android/debug.keystore
