A FirebaseUI Auth plugin to enable easy authentication using a number of different providers.
From the documentation (https://opensource.google.com/projects/firebaseui):
A UI library for Firebase, including binding for the realtime database, authentication and storage.
This plugin supports the following platforms:
The following providers are currently supported:
Follow the instructions for each of the platforms and providers you wish you use in order to add firebase to your app:
cordova plugin add cordova-plugin-firebaseui-auth --variable ANDROID_FIREBASE_CORE_VERSION=16.0.0
--variable ANDROID_FIREBASE_AUTH_VERSION=16.0.1
--variable ANDROID_PLAY_SERVICES_AUTH_VERSION=15.0.1
--variable ANDROID_FIREBASEUI_VERSION=3.3.1
--variable ANDROID_FACEBOOK_SDK_VERSION=4.31.0
--variable FACEBOOK_APPLICATION_ID=12345678
--variable FACEBOOK_DISPLAY_NAME="My application"
--variable REVERSED_CLIENT_ID="com.googleusercontent.apps.9999999999-xxxxxxxxxxxxxxxxxxxxxxxxxx"
--variable COLOR_PRIMARY="#ffffff"
--variable COLOR_DARK_PRIMARY="#555555"
--variable COLOR_LIGHT_PRIMARY="#aaaaaa"
--variable COLOR_ACCENT="#7C4DFF"
--variable COLOR_SECONDARY="#FFC107"
--variable COLOR_CONTROL="#ffffff"
--variable COLOR_BACKGROUND="#000000"or
phonegap plugin add cordova-plugin-firebaseui-auth --variable ANDROID_FIREBASE_CORE_VERSION=16.0.0
--variable ANDROID_PLAY_SERVICES_AUTH_VERSION=16.0.1
--variable ANDROID_FIREBASE_AUTH_VERSION=15.1.0
--variable ANDROID_FIREBASEUI_VERSION=3.3.1
--variable ANDROID_FACEBOOK_SDK_VERSION=4.31.0
--variable FACEBOOK_APPLICATION_ID=12345678
--variable FACEBOOK_DISPLAY_NAME="My application"
--variable REVERSED_CLIENT_ID="com.googleusercontent.apps.9999999999-xxxxxxxxxxxxxxxxxxxxxxxxxx"
--variable COLOR_PRIMARY="#ffffff"
--variable COLOR_DARK_PRIMARY="#555555"
--variable COLOR_LIGHT_PRIMARY="#aaaaaa"
--variable COLOR_ACCENT="#7C4DFF"
--variable COLOR_SECONDARY="#FFC107"
--variable COLOR_CONTROL="#ffffff"
--variable COLOR_BACKGROUND="#000000"Any variables that are not supplied will use default values. For credential based variables (FACEBOOK_APPLICATION_ID, REVERSED_CLIENT_ID and REVERSED_CLIENT_ID) this will result in the provider not working until you supply real values.
Not all variables are relevant to all providers:
You must ensure that google-services.json is put in the correct location. This can be achieved using the following in your config.xml:
<platform name="android">
<resource-file src="https://github.com/ReallySmallSoftware/cordova-plugin-firebaseui-auth/raw/master/google-services.json" target="google-services.json" />
</platform>In order for FirebaseUI to work on Android the default Cordova MainActivity needs to be replaced with a class that inherits from a FragmentActivity.
This plugin therefore depends on the cordova-plugin-android-fragmentactivity plugin to enable this.
iOS requires GoogleService-Info.plist is put in the correct location. Similarly this can be done as follws:
<platform name="ios">
<resource-file src="https://github.com/ReallySmallSoftware/cordova-plugin-firebaseui-auth/raw/master/GoogleService-Info.plist" />
</platform>If using multiple Firebase plugins it may be necessary to enable this.
This plugin uses Promises. If you want to use this with Android 4.4 then you will need to include a Promise polyfill.
This guide will assume familiarity with Firebase and FirebaseUI.
Create a new FirebaseAuthUI instance:
FirebaseUIAuth.initialise({
"providers": ["GOOGLE", "FACEBOOK", "EMAIL"],
"tosUrl" : "http://www.myapp.co.uk/terms.html",
"privacyPolicyUrl" : "http://www.myapp.co.uk/privacy.html",
"theme" : "themeName",
"logo" : "logoName",
"uiElement" : "mywebelement",
"anonymous" : true|false,
"smartLockEnabled" : true|false,
"smartLockHints" : true|false,
"iOSDisable" : true | false
}).then(function(firebaseUIAuth) {
myfirebaseUIAuthInstance = firebaseUIAuth;
});This is initialised as a Promise to allow the Browser implementation to dynamically add a reference to the FirestoreUI Javascript SDK.
Not all of the above options will function on all platforms:
In order for the above initialisation to work on a browser you need to include some extra configuration in the form of the browser section show below:
FirebaseUIAuth.initialise({
"providers": ["GOOGLE", "FACEBOOK", "EMAIL", "ANONYMOUS"],
"tosUrl" : "http://www.myapp.co.uk/terms.html",
"privacyPolicyUrl" : "http://www.myapp.co.uk/privacy.html",
"theme" : "themeName",
"logo" : "logoName",
"uiElement" : "mywebelement",
"anonymous" : true|false,
"smartLockEnabled" : true|false,
"smartLockHints" : true|false,
"browser" : {
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
authDomain: 'xxxxxxxxxxxxxx.firebaseapp.com',
projectId: 'xxxxxxxxxxxxx',
}
}).then(function(firebaseUIAuth) {
myfirebaseUIAuthInstance = firebaseUIAuth;
});Call this to sign in anonymously.
Call this to start the sign in process based on the above configuration. This can raise the following events:
The user has signed in successfully. The following data is returned:
{
name: 'user display name',
email: 'user email',
emailVerified: true | false,
photoUrl: 'url of user image if available',
id: <user id>,
newUser: true | false
}Sign in failed for some reason. The following is returned:
{
code: <failure code>,
message: 'failure message'
}Sign in has been aborted by the user, by closing the sign in window.
Sign the current user out of the application. This can raise the following events:
The user has signed out successfully.
Sign out failed for some reason.
Get an access token, returning a Promise.
Get the currently signed in user.
Delete the current user. This can raise the following events:
The user was deleted successfully.
The user was not deleted.
Sends a verification email for the current user. This can raise the following events:
The email verification was sent.
The email verification was not sent.
Reloads user details. Useful after a verification link has been used. A signinsuccess event will be raised.
For iOS and Android a number of platform files are added or updated based on the supplied configuration.
res/values/strings.xml
This has the following added:
res/values/color.xml
This is either created or updated with the colour definitions supplied.
res/values/styles.xml
This is either created or updated with a style that uses the above colour definitions.
*-Info.plist
The following keys are added:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>REVERSED_CLIENT_ID</string>
<key>CFBundleURLSchemes</key>
<array>
<string>$REVERSED_CLIENT_ID</string>
</array>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string></string>
<key>CFBundleURLSchemes</key>
<array>
<string>fb$FACEBOOK_APPLICATION_ID</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>$FACEBOOK_APPLICATION_ID</string>
<key>FacebookDisplayName</key>
<string>$FACEBOOK_DISPLAY_NAME</string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-api</string>
<string>fbauth2</string>
<string>fbshareextensions</string>
</array>In order to ensure the browser implementation works, it will be necessary to configure the Content-Security-Policy meta tag with something similar to the following:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap://ready file://* *;
style-src 'self' 'unsafe-inline'
https://*.gstatic.com
https://*.googleapis.com
https://*.firebase.com
https://*.firebaseio.com;
script-src 'self' 'unsafe-inline' 'unsafe-eval'
https://*.gstatic.com
https://*.googleapis.com
https://*.google.com
https://*.firebase.com
https://*.firebaseio.com">Support is now included for typescript. Use the following to reference the typescript definitions:
/// <reference types="cordova-plugin-firebaseui-auth" />
FirebaseUIAuth.initialise(options)
.then((firebaseUIAuth: FirebaseUIAuth.FirebaseUIAuth) => {
firebaseUIAuth.signIn();
});You may also need to add an external to webpack.config.ls:
externals: {
'cordova/exec': "cordova/exec"
},