Skip to content

Commit 760c2b4

Browse files
EhespSalakargreghesp
authored
feat: initial commit of new documentation website (#2925)
Co-authored-by: Mike Diarmid <[email protected]> Co-authored-by: Greg Hesp <[email protected]>
1 parent 2bfa0f6 commit 760c2b4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+15216
-0
lines changed

.editorconfig

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# editorconfig
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true

.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,26 @@ build/
4646
.settings
4747
/pubspec.yaml
4848
.last_build_id
49+
50+
# Docs
51+
52+
# Dependencies
53+
node_modules
54+
55+
# Production
56+
website/build
57+
58+
# Generated files
59+
.docusaurus
60+
.cache-loader
61+
62+
# Misc
63+
.env.local
64+
.env.development.local
65+
.env.test.local
66+
.env.production.local
67+
68+
npm-debug.log*
69+
yarn-debug.log*
70+
yarn-error.log*
71+
321 KB
Loading
268 KB
Loading

docs/admob/usage.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: AdMob
3+
sidebar_label: Usage
4+
---
5+
6+
AdMob usage

docs/analytics/usage.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: Analytics
3+
sidebar_label: Usage
4+
---
5+
6+
Analytics usage

docs/auth/error-handling.mdx

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Error Handling
3+
sidebar_label: Error Handling
4+
---
5+
6+
The Firebase Authentication SDKs provided a simple way for catching the various errors which may occur which using
7+
authentication methods. FlutterFire exposes these errors via the [`FirebaseAuthException`](!firebase_auth_platform_interface.FirebaseAuthException)
8+
class.
9+
10+
At a minimum, a `code` and `message` are provided, however in some cases additional properties such as an email address
11+
and credential are also provided. For example, if the user is attempting to sign in wih an email and password,
12+
any errors thrown can be explicially caught:
13+
14+
```dart
15+
try {
16+
await FirebaseAuth.instance.signInWithEmailAndPassword(
17+
18+
password: "SuperSecretPassword!"
19+
);
20+
} catch on FirebaseAuthException (e) {
21+
print('Failed with error code: ${e.code}');
22+
print(e.message);
23+
}
24+
```
25+
26+
Each method provides various error codes and messages depending on the type of authentication invocation type. The
27+
[Reference API](https://pub.dev/documentation/firebase_auth/latest/) provides up-to-date details on the errors for each method.
28+
29+
## Handling `account-exists-with-different-credential` Errors
30+
31+
If you enabled the One account per email address setting in the [Firebase console](https://console.firebase.google.com/project/_/authentication/providers),
32+
when a user tries to sign in a to a provider (such as Google) with an email that already exists for another Firebase user's provider
33+
(such as Facebook), the error `auth/account-exists-with-different-credential` is thrown along with an `AuthCredential` class (Google ID token).
34+
To complete the sign in to the intended provider, the user has to sign first to the existing provider (e.g. Facebook) and then link to the former
35+
`AuthCredential` (Google ID token).
36+
37+
```dart
38+
FirebaseAuth auth = FirebaseAuth.instance;
39+
40+
// Create a credential from a Google Sign-in Request
41+
GoogleAuthCredential googleAuthCredential = GoogleAuthProvider.credential(accessToken: 'xxxx');
42+
43+
try {
44+
// Attempt to sign in the user in with Google
45+
await auth.signInWithCredential(googleAuthCredential);
46+
} catch on FirebaseAuthError (e) {
47+
if (e.code == 'account-exists-with-different-credential') {
48+
// The account already exists with a different credential
49+
String email = e.email;
50+
AuthCredential pendingCredential = e.credential;
51+
52+
// Fetch a list of what sign-in methods exist for the conflicting user
53+
List<String> userSignInMethods = await auth.fetchSignInMethodsForEmail(email);
54+
55+
// If the user has several sign-in methods,
56+
// the first method in the list will be the "recommended" method to use.
57+
if (userSignInMethods.first == 'password') {
58+
// Prompt the user to enter their password
59+
String password = '...';
60+
61+
// Sign the user in to their account with the password
62+
UserCredential userCredential = await auth.signInWithEmailAndPassword(
63+
email: email,
64+
password: password,
65+
);
66+
67+
// Link the pending credential with the existing account
68+
await userCredential.user.linkWithCredential(pendingCredential);
69+
70+
// Success! Go back to your application flow
71+
return goToApplication();
72+
}
73+
74+
// Since other providers are now external, you must now sign the user in with another
75+
// auth provider, such as Facebook.
76+
if (userSignInMethods.first == 'facebook.com') {
77+
// Create a new Facebook credential
78+
String accessToken = await triggerFacebookAuthentication();
79+
FacebookAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(accessToken);
80+
81+
// Sign the user in with the credential
82+
UserCredential userCredential = await auth.signInWithCredential(facebookAuthCredential);
83+
84+
// Link the pending credential with the existing account
85+
await userCredential.user.linkWithCredential(pendingCredential);
86+
87+
// Success! Go back to your application flow
88+
return goToApplication();
89+
}
90+
91+
// Handle other OAuth providers...
92+
}
93+
}
94+
```
95+
96+

docs/auth/overview.mdx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: Authentication
3+
sidebar_label: Overview
4+
---
5+
6+
## What does it do?
7+
8+
Firebase Authentication provides backend services & easy-to-use SDKs to authenticate users to your app.
9+
It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook
10+
and Twitter, and more.
11+
12+
<YouTube id="8sGY55yxicA" />
13+
14+
## Installation
15+
16+
Before installing the Authentication plugin, ensure that you have followed the [Getting Started](../overview.mdx) documentation
17+
and have initialized FlutterFire.
18+
19+
### 1. Add dependency
20+
21+
Add the [`firebase_auth`](https://pub.dartlang.org/packages/firebase_auth) dependency to your projects `pubspec.yaml` file:
22+
23+
```yaml {5} title="pubspec.yaml"
24+
dependencies:
25+
flutter:
26+
sdk: flutter
27+
firebase_core: "{{ plugins.firebase_core }}"
28+
firebase_auth: "{{ plugins.firebase_auth }}"
29+
```
30+
31+
### 2. Download dependency
32+
33+
Download the dependency by running the following command in your project:
34+
35+
```bash
36+
$ flutter pub get
37+
```
38+
39+
### 3. (Web Only) Add the SDK
40+
41+
If using FlutterFire on the web, add the [`firebase-auth`](!firebase_auth) JavaScript SDK to your `index.html` file:
42+
43+
```html {5} title="web/index.html"
44+
<html>
45+
...
46+
<body>
47+
<script src="https://www.gstatic.com/firebasejs/{{ web.firebase_cdn }}/firebase-app.js"></script>
48+
<script src="https://www.gstatic.com/firebasejs/{{ web.firebase_cdn }}/firebase-auth.js"></script>
49+
</body>
50+
</html>
51+
```
52+
53+
### 4. Rebuild your app
54+
55+
Once complete, rebuild your Flutter application:
56+
57+
```bash
58+
$ flutter run
59+
```
60+
61+
## Next Steps
62+
63+
Once installed, you're ready to start using Firebase Authentication in your Flutter Project. View the
64+
[Usage documentation](usage.mdx) to get started.

docs/auth/phone.mdx

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
---
2+
title: Phone Authentication
3+
sidebar_label: Phone Auth
4+
---
5+
6+
Phone authentication allows users to sign in to Firebase using their phone as the authenticator. An SMS message is sent
7+
to the user (using the provided phone number) containing a unique code. Once the code has been authorized, the user is able to sign
8+
into Firebase.
9+
10+
> Phone numbers that end users provide for authentication will be sent and stored by Google to improve spam and abuse
11+
> prevention across Google service, including to, but not limited to Firebase. Developers should ensure they have the
12+
> appropriate end-user conset prior to using the Firebase Authentication phone number sign-in service.authentication
13+
14+
Firebase Phone Authentication is not supported in all countries. Please see their [FAQs](https://firebase.google.com/support/faq/#develop) for more information
15+
16+
## Setup
17+
18+
Before starting with Phone Authentication, ensure you have followed these steps:
19+
20+
1. Enable Phone as a Sign-In method in the [Firebase console](https://console.firebase.google.com/u/0/project/_/authentication/providers).
21+
2. **Android**: If you haven't already set your app's SHA-1 hash in the [Firebase console](https://console.firebase.google.com/), do so.
22+
See [Authenticating Your Client](https://developers.google.com/android/guides/client-auth) for information about finding your app's SHA-1 hash.
23+
3. **iOS**: In XCode, [enable push notifications](http://help.apple.com/xcode/mac/current/#/devdfd3d04a1) for your project & ensure
24+
your APNs authentication key is [configured with Firebase Cloud Messaging (FCM)](https://firebase.google.com/docs/cloud-messaging/ios/certs).
25+
To view an indepth explaination of this step, view the [Firebase iOS Phone Auth](https://firebase.google.com/docs/auth/ios/phone-auth) documentation.
26+
4. **Web**: Ensure that you have added your applications domian on the [Firebase console](https://console.firebase.google.com/), under
27+
**OAuth redirect domains**.
28+
29+
**Note**; Phone number sign-in is only available for use on real devices and the web. To test your authentication flow on device emulators,
30+
please see [Testing](#testing).
31+
32+
## Usage
33+
34+
FlutterFire provides two individual ways to sign a user in with their phone number. Native (e.g. Android & iOS) platforms provide
35+
different functionality to validating a phone number than the web, therefore two methods exist for each platform exclusively:
36+
37+
- **Native Platform**: [`verifyPhoneNumber`](!firebase_auth.FirebaseAuth.verifyPhoneNumber).
38+
- **Web Platform**: [`signInWithPhoneNumber`](!firebase_auth.FirebaseAuth.signInWithPhoneNumber).
39+
40+
### Native: `verifyPhoneNumber`
41+
42+
On native platforms, the users phone number must be first verified and then the user can either sign-in or link their account with a
43+
[`PhoneAuthCredential`](!firebase_auth_platform_interface.PhoneAuthCredential).
44+
45+
First you must prompt the user for their phone number. Once provided, call the `verifyPhoneNumber()` method:
46+
47+
```dart
48+
await FirebaseAuth.instance.verifyPhoneNumber(
49+
phoneNumber: '+44 7123 123 456',
50+
verificationCompleted: (PhoneAuthCredential credential) {},
51+
verificationFailed: (FirebaseAuthException e) {},
52+
codeSent: (String verificationId, int resendToken) {},
53+
codeAutoRetrievalTimeout: (String verificationId) {},
54+
);
55+
```
56+
57+
There are 4 seperate callbacks that you must handle, each will determine how you update the application UI:
58+
59+
1. **[verificationCompleted](#verificationCompleted)**: Automatic handling of the SMS code on Android devices.
60+
2. **[verificationFailed](#verificationFailed)**: Handle failure events such as invalid phone numbers or whethehr the SMS quota has been exceeded.
61+
3. **[codeSent](#codeSent)**: Handle when a code has been sent to the device from Firebase, used to prompt users to enter the code.
62+
4. **[codeAutoRetrievalTimeout](#codeAutoRetrievalTimeout)**: Handle a timeout of when automatic SMS code handling fails.
63+
64+
#### verificationCompleted
65+
66+
This handler will only be called on Android devices which support automatic SMS code resolution.
67+
68+
When the SMS code is delivered to the device Android will automatically verify the SMS code without
69+
requiring the user to manually input the code. If this event occurs, a `PhoneAuthCredential` is automatically provided which can be
70+
used to sign-in with or link the users phone number.
71+
72+
```dart
73+
FirebaseAuth auth = FirebaseAuth.instance;
74+
75+
await auth.verifyPhoneNumber(
76+
phoneNumber: '+44 7123 123 456',
77+
verificationCompleted: (PhoneAuthCredential credential) async {
78+
// ANDROID ONLY!
79+
80+
// Sign the user in (or link) with the auto-generated credential
81+
await auth.signInWithCredential(credential);
82+
},
83+
);
84+
```
85+
86+
#### verificationFailed
87+
88+
If Firebase returns an error, for example for an incorrect phone number or if the SMS quota for the project has exceeded,
89+
a `FirebaseAuthException` will be sent to this handler. In this case, you would prompt your user something went wrong depending on the error
90+
code.
91+
92+
```dart
93+
FirebaseAuth auth = FirebaseAuth.instance;
94+
95+
await auth.verifyPhoneNumber(
96+
phoneNumber: '+44 7123 123 456',
97+
verificationFailed: (FirebaseAuthException e) {
98+
if (e.code == 'invalid-phone-number') {
99+
print('The provided phone number is not valid.');
100+
}
101+
102+
// Handle other errors
103+
},
104+
);
105+
```
106+
107+
#### codeSent
108+
109+
When Firebase sends an SMS code to the device, this handler is triggered with a `verificationId` and `resendToken`.
110+
111+
Once triggered, it would be a good time to update your application UI to prompt the user to enter the SMS code they're expecting.
112+
Once the SMS code has been entered, you can combine the verification ID with the SMS code to create a new `PhoneAuthCredential`:
113+
114+
```dart
115+
FirebaseAuth auth = FirebaseAuth.instance;
116+
117+
await auth.verifyPhoneNumber(
118+
phoneNumber: '+44 7123 123 456',
119+
codeSent: (String verificationId, int resendToken) async {
120+
// Update the UI - wait for the user to enter the SMS code
121+
String smsCode = 'xxxx';
122+
123+
// Create a PhoneAuthCredential with the code
124+
PhoneAuthCredential phoneAuthCredential = PhoneAuthProvider.credential(verificationId, smsCode);
125+
126+
// Sign the user in (or link) with the credential
127+
await auth.signInWithCredential(phoneAuthCredential);
128+
},
129+
);
130+
```
131+
132+
By default, Firebase will not re-send a new SMS message if it has been recently sent. You can however override this behaviour
133+
by re-calling the `verifyPhoneNumber` method with the resend token to the `forceResendingToken` argument.
134+
If successful, the SMS message will be resent.
135+
136+
#### codeAutoRetrievalTimeout
137+
138+
On Android devices which support automatic SMS code resolution, this handler will be called if the device has not automatically
139+
resolved an SMS message within a certain timeframe. Once the timeframe has passed, the device will no longer attempt to resolve
140+
any incoming messages.
141+
142+
By default, the device waits for 30 seconds however this can be customized with the `timeout` argument:
143+
144+
```dart
145+
FirebaseAuth auth = FirebaseAuth.instance;
146+
147+
await auth.verifyPhoneNumber(
148+
phoneNumber: '+44 7123 123 456',
149+
timeout: const Duration(seconds: 60),
150+
codeAutoRetrievalTimeout: (String verificationId) {
151+
// Auto-resolution timed out...
152+
},
153+
);
154+
```
155+
156+
### Web: `signInWithPhoneNumber`
157+
158+
TODO
159+
160+
## Testing
161+
162+
Firebase provides support for locally testing phone numbers:
163+
164+
1. On the Firebase Console, select the "Phone" authentication provider and click on the "Phone numbers for testing" dropdown.
165+
2. Enter a new phone number (e.g. `+44 7444 555666`) and a test code (e.g. `123456`).
166+
167+
If providing a test phone number to either the `verifyPhoneNumber` or `signInWithPhoneNumber` methods, no SMS will actually be sent. You
168+
can instead provide the test code directly to the `PhoneAuthProvider` or with `signInWithPhoneNumber`s confirmation result handler.

0 commit comments

Comments
 (0)