Capacitor plugin for Firebase Authentication
npm install @loftyduck/capacitor-firebase-auth
Capacitor plugin for Firebase Authentication that handle the authentication on Native layer and propagate the token to the web view layer. After the sign-in process completes, the user will be signed in within both tiers.
The plugin supports Google, Twitter, Facebook and Phone providers in Android and iOS.
Issue 38#: interoperability with Stencil, thanks to Justin Rich.
#### from 0.1.x to 0.2.0: GoogleSignIn 5.0.0
> Required GoogleSignIn 5.0.0 on iOS platform, run pod update if using lower version.
#### from 0.2.x to 0.3.0: esModuleInterop
> The firebase import was changed using esModuleInterop, that was a Stencil requirements, please see issue #38.
``
1 import firebase from 'firebase/app';
~~~~~~~~
8601 export = firebase;
~~~~~~~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
If you see the message above, please use esModuleInterop=true in your tsconfig.json file.
1. Support for Apple provider
2. Support for PWA
3. Email/Password Provider
> Should we do this? It's very simple to authenticate on WebView without any plugin.
> For awhile, waiting a good reason to do it. (track interest on Issue #24)
Install the plugin into your Capacitor project with npm.
`
npm install --save capacitor-firebase-auth
> Don't forget to run npx cap sync once after the installation to propagate the plugin to native projects.
$3
- FBSDKCoreKit 5.0.0 (see issue #12)
- FBSDKLoginKit 5.0.0 (see issue #12)
- GoogleSignIn 5.0.0 (see issue #14 and #15)
1. In file capacitor.config.json config the providers list, language code and native authentication as desired`
[...]
"plugins": {
"CapacitorFirebaseAuth": {
"providers": ["google.com", "twitter.com", "facebook.com", "phone"],
"languageCode": "en"
"nativeAuth": false,
"permissions": {
"google": ["profile", "https://www.googleapis.com/auth/drive", ...]
}
}
}
[...]
2. In file android/app/src/main/java/.../MainActivity.java add the reference to the Capacitor Firebase Auth plugin inside the Bridge initialization.`
[...]
import com.baumblatt.capacitor.firebase.auth.CapacitorFirebaseAuth;
// Initializes the Bridge
this.init(savedInstanceState, new ArrayList
// Additional plugins you've installed go here
// Ex: add(TotallyAwesomePlugin.class);
add(CapacitorFirebaseAuth.class);
}});
[...]
3. In file add the following lines : `
android {
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
> Sorry, but even if you are not using Twitter authentication, this will be needed, see Twitter section for detail.
4. For Typescript users, please, review your tsconfig.json and ensure that you are using esModuleInterop=true.
1. Follow instructions to add Firebase to your native project:
* Add Firebase to your Android project
* Add Firebase to your iOS project
2. If you haven't yet connected your app to your Firebase project, do so from the Firebase console.
> Please, don't forgot your Google Service _.json_ or _.plist_ file or your app will crash on the startup.
#### Firebase iOS specific configurations
3. Add the pods that you want to install. You can include a Pod in your Podfile like this:
`
target 'App' do
capacitor_pods
# Add your Pods here
pod 'Firebase/Core'
pod 'Firebase/Auth'
end
#### Google global configurations
1. Enable Google Sign-In in the Firebase console:
* In the Firebase console, open the Auth section.
* On the Sign in method tab, enable the Google sign-in method and click Save.
#### Google Android specific configurations
1. If you haven't yet specified your app's SHA-1 fingerprint, do so from the Settings page of the Firebase console. See Authenticating Your Client for details on how to get your app's SHA-1 fingerprint.
#### Google iOS specific configurations
1. Add custom URL schemes to your Xcode project:
* Open your project configuration: double-click the project name in the left tree view. Select your app from the TARGETS section, then select the Info tab, and expand the URL Types section.
* Click the + button, and add a URL scheme for your reversed client ID. To find this value, open the GoogleService-Info.plist configuration file, and look for the REVERSED_CLIENT_ID key. Copy the value of that key, and paste it into the URL Schemes box on the configuration page. Leave the other fields blank.
#### Twitter global configurations
1. Register your app as a developer application on Twitter and get your app's API Key and API Secret.
2. Enable Twitter Login:
* In the Firebase console, open the Auth section
* On the Sign in method tab, enable the Twitter sign-in method and specify the App ID and App Secret you got from Facebook.
* Then, make sure your Firebase OAuth redirect URI (e.g. _my-app-12345.firebaseapp.com/__/auth/handler_) is set as your Callback URL in your app's settings page on your Twitter app's config.
#### Twitter Android specific configurations
1. In file android/app/src/main/res/values/ids.xml add the following lines :`
xml`
> Don't forget to replace and [APP_SECRET] by your Twitter App ID and App Secret respectively.
2. In file android/app/build.gradle add the following lines : `
android {
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
> Please See: Invoke-customs are only supported starting with android 0 --min-api 26 on stackoverflow.com.
#### Twitter iOS specific configurations
1. Create the file ios/App/App/Twitter-Info.plist and configure your [APP_ID] and [APP_SECRET].`
xml`
2. Add custom URL schemes to your Xcode project:
* Open your project configuration: double-click the project name in the left tree view. Select your app from the TARGETS section, then select the Info tab, and expand the URL Types section.
* Click the + button, and add a scheme for the Callback URL of Twitter Kit for iOS. In URL Schemes box on the configuration page use twitterkit-[APP_ID]. Leave the other fields blank.
3. Dispatch the designated callback URL to Twitter Kit in your ios/App/App/AppDelegate.swift file. `
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
// Called when the app was launched with a url. Feel free to add additional processing here,
// but if you want the App API to support tracking app url opens, make sure to keep this call
if let scheme = url.scheme {
if scheme.starts(with: "twitterkit") {
return TWTRTwitter.sharedInstance().application(app, open: url, options: options)
}
}
return CAPBridge.handleOpenUrl(url, options)
}
> Don't forget to replace and [APP_SECRET] by your Twitter App ID and App Secret respectively.
#### Facebook global configurations
1. On the Facebook for Developers site, get the App ID and an App Secret for your app
2. Enable Facebook Login:
* In the Firebase console, open the Auth section
* On the Sign in method tab, enable the Facebook sign-in method and specify the App ID and App Secret you got from Facebook.
* Then, make sure your OAuth redirect URI (e.g. _my-app-12345.firebaseapp.com/__/auth/handler_) is listed as one of your OAuth redirect URIs in your Facebook app's settings page on the Facebook for Developers site in the Product Settings > Facebook Login config.
#### Facebook Android specific configurations
1. Add the dependency for Facebook SDK to your app-level build.gradle file:
`
implementation 'com.facebook.android:facebook-android-sdk:4.41.0'
2. In file , add the following XML elements under :`
xml`
android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="@string/app_name" />
android:exported="true">
3. In file add the following lines :`
xml`
> Don't forget to replace by your Facebook App ID.
#### Facebook iOS specific configurations
1. Add your your [APP_ID] and [APP_NAME] keys in the file ios/App/App/Info.plist.
`xml`
[...]
[...]
2. Add custom URL schemes to your Xcode project:
* Open your project configuration: double-click the project name in the left tree view. Select your app from the TARGETS section, then select the Info tab, and expand the URL Types section.
* Click the + button, and add a URL scheme for the Callback URL of Facebook Kit for iOS. In URL Schemes box on the configuration page use fb[APP_ID]. Leave the other fields blank.
3. Add the pods that you want to install. You can include a Pod in your Podfile like this:
`
target 'App' do
capacitor_pods
# Add your Pods here
pod 'Firebase/Core'
pod 'Firebase/Auth'
pod 'FBSDKCoreKit'
pod 'FBSDKLoginKit'
end
4. Dispatch the designated callback URL to Facebook Kit in your ios/App/App/AppDelegate.swift file.
Facebook SDK >= 5.0.0
`
import FBSDKCoreKit
...
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
// Called when the app was launched with a url. Feel free to add additional processing here,
// but if you want the App API to support tracking app url opens, make sure to keep this call
if let scheme = url.scheme, let host = url.host {
if scheme == "fb\(String(describing: Settings.appID))" && host == "authorize" {
return ApplicationDelegate.shared.application(app, open: url, options: options)
}
}
return CAPBridge.handleOpenUrl(url, options)
}
FaceBook SDK <= 4.41.0
`
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
// Called when the app was launched with a url. Feel free to add additional processing here,
// but if you want the App API to support tracking app url opens, make sure to keep this call
if let scheme = url.scheme, let host = url.host {
if scheme == "fb\(String(describing: FBSDKSettings.appID()))" && host == "authorize" {
return FBSDKApplicationDelegate.sharedInstance().application(app, open: url, options: options)
}
}
return CAPBridge.handleOpenUrl(url, options)
}
> Don't forget to replace [APP_ID] and [APP_NAME] by your Facebook App ID and App Name respectively.
#### Sign in
`typescript
import {User} from 'firebase/app'
import {cfaSignIn} from 'capacitor-firebase-auth';
cfaSignIn('google.com').subscribe(
(user: User) => console.log(user.displayName);
)
`
#### Sign in mapping User to UserInfo
`typescript`
import {cfaSignIn, mapUserToUserInfo} from 'capacitor-firebase-auth';
import {UserInfo} from 'firebase/app';
cfaSignIn('google.com').pipe(
mapUserToUserInfo(),
).subscribe(
(user: UserInfo) => console.log(user.displayName)
)
#### Sign out
`typescript
import {cfaSignOut} from 'capacitor-firebase-auth';
//[...]
cfaSignOut().subscribe()
`
#### Phone Verification
`typescript
import {cfaSignIn} from 'capacitor-firebase-auth';
cfaSignIn('phone', {phone: +16505551234}).subscribe(
user => console.log(user.phoneNumber)
)
`
> On iOS platform the observable will complete without emit (like EMPTY), follow the notifications below to sign on Firebase on Web Layer.
#### Notification for Phone Verification step
`typescript
import {cfaSignInPhoneOnCodeSent, cfaSignInPhoneOnCodeReceived} from 'capacitor-firebase-auth';
//[...]
// Android and iOS
cfaSignInPhoneOnCodeSent().subscribe(
verificationId => console.log(verificationId)
)
// Android Only
cfaSignInPhoneOnCodeReceived().subscribe(
(event: {verificationId: string, verificationCode: string}) => console.log(${event.verificationId}:${event.verificationCode})
)
`
Suggestion for web authentication code to iOS, the `verificationCode must be provided by the user, please see Firebase documentation for better options.`typescript
import * as firebase from 'firebase';
const credential = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
firebase.auth().signInWithCredential(credential);
`
This implementations of the javascript facade calls, return in addition to the Firebase user
the information returned by the plugin from the native layer. For example, in Twitter sign in
the token and secret are returned for use with Twitter User API.
> Specials thanks for @go-u, by this suggested improvement, more information please see issue #23!
#### Sign in
`typescript
import * as firebase from 'firebase/app';
import {cfaSignIn, SignInResult} from 'capacitor-firebase-auth/alternative'; import {SignInResult} from './definitions';
cfaSignIn('twitter.com').subscribe(
({userCredential, result}: {userCredential: firebase.auth.UserCredential, result: SignInResult}) => {
console.log(userCredential.user.displayName);
console.log(result) // will print (providerId, idToken and secret)
}
)
`
#### Sign In using direct twitter method
`typescript
import * as firebase from 'firebase/app';
import {cfaSignInTwitter, TwitterSignInResult} from 'capacitor-firebase-auth/alternative'; import {SignInResult} from './definitions';
cfaSignInTwitter().subscribe(
({userCredential, result}: {userCredential: firebase.auth.UserCredential, result: TwitterSignInResult}) => {
console.log(userCredential.user.displayName);
console.log(result.idToken)
}
)
`
#### Sign In; Use credentials for something; and map to UserInfo
`typescript
import {UserInfo} from 'firebase';
import {cfaSignInTwitter, TwitterSignInResult, mapUserCredentialToUserInfo} from 'capacitor-firebase-auth/alternative';
import {tap} from 'rxjs/operators';
cfaSignInTwitter().pipe(
tap(({result}:{result: TwitterSignInResult}) => console.log(result.idToken)),
mapUserCredentialToUserInfo(),
).subscribe(
(user: UserInfo) => console.log(user.displayName)
)
`
#### Phone Verification
The user will be signed in only in web layer. This limitation is due to the verification code only works once. So, there is no way to authenticate the user in both layers (native and web) with just one SMS Code.
If you feel that project is useful, please, considered to buy me a beer through PayPal
Looking forward to enable FUNDING.yml soon.
and On Code Received from Phone Verification process for Android Platform.
- Notifications for On Code Sent from Phone Verification process for iOS Platform (The Firebase does not read the SMS on iOS platform, so there is no way to notify On Code Received`).