⚡️ Capacitor plugin for Firebase Authentication.

⚠️ Deprecated repository

This project has been moved to the following monorepo: robingenz/capacitor-firebase.

Firebase Authentication

@robingenz/capacitor-firebase-authentication

Capacitor plugin for Firebase Authentication.

Maintainers

Installation

npm install @robingenz/capacitor-firebase-authentication firebase
npx cap sync

Add Firebase to your project if you haven't already (Android / iOS / Web).

On iOS, verify that this function is included in your app's AppDelegate.swift:

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
  return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
}

The further installation steps depend on the selected authentication method:

• Apple Sign-In
• Facebook Sign-In
• GitHub Sign-In
• Google Sign-In
• Microsoft Sign-In
• Play Games Sign-In
• Twitter Sign-In
• Yahoo Sign-In
• Phone Number Sign-In
• Custom Token Sign-In

Attention: Please note that this plugin uses third-party SDKs to offer native sign-in. These SDKs can initialize on their own and collect various data. Here you can find more information.

Configuration

These configuration values are available:

Examples

In capacitor.config.json:

{
  "plugins": {
    "FirebaseAuthentication": {
      "skipNativeAuth": false,
      "providers": ["apple.com", "google.com"]
    }
  }
}

In capacitor.config.ts:

/// <reference types="@capacitor/firebase-authentication" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    FirebaseAuthentication: {
      skipNativeAuth: false,
      providers: ["apple.com", "google.com"],
    },
  },
};

export default config;

Demo

A working example can be found here: robingenz/capacitor-firebase-authentication-demo

Usage

import { FirebaseAuthentication } from '@robingenz/capacitor-firebase-authentication';

const getCurrentUser = async () => {
  const result = await FirebaseAuthentication.getCurrentUser();
  return result.user;
};

const getIdToken = async () => {
  const result = await FirebaseAuthentication.getIdToken();
  return result.token;
};

const setLanguageCode = async () => {
  await FirebaseAuthentication.setLanguageCode({ languageCode: 'en-US' });
};

const signInWithApple = async () => {
  await FirebaseAuthentication.signInWithApple();
};

const signInWithFacebook = async () => {
  await FirebaseAuthentication.signInWithFacebook();
};

const signInWithGithub = async () => {
  await FirebaseAuthentication.signInWithGithub();
};

const signInWithGoogle = async () => {
  await FirebaseAuthentication.signInWithGoogle();
};

const signInWithMicrosoft = async () => {
  await FirebaseAuthentication.signInWithMicrosoft();
};

const signInWithPlayGames = async () => {
  await FirebaseAuthentication.signInWithPlayGames();
};

const signInWithPhoneNumber = async () => {
  const { verificationId } = await FirebaseAuthentication.signInWithPhoneNumber(
    {
      phoneNumber: '123456789',
    },
  );
  const verificationCode = window.prompt(
    'Please enter the verification code that was sent to your mobile device.',
  );
  await FirebaseAuthentication.signInWithPhoneNumber({
    verificationId,
    verificationCode,
  });
};

const signInWithTwitter = async () => {
  await FirebaseAuthentication.signInWithTwitter();
};

const signInWithYahoo = async () => {
  await FirebaseAuthentication.signInWithYahoo();
};

const signOut = async () => {
  await FirebaseAuthentication.signOut();
};

const useAppLanguage = async () => {
  await FirebaseAuthentication.useAppLanguage();
};

API

• getCurrentUser()
• getIdToken(...)
• setLanguageCode(...)
• signInWithApple(...)
• signInWithFacebook(...)
• signInWithGithub(...)
• signInWithGoogle(...)
• signInWithMicrosoft(...)
• signInWithPlayGames(...)
• signInWithTwitter(...)
• signInWithYahoo(...)
• signInWithPhoneNumber(...)
• signInWithCustomToken(...)
• signOut()
• useAppLanguage()
• addListener('authStateChange', ...)
• removeAllListeners()
• Interfaces
• Type Aliases

getCurrentUser()

getCurrentUser() => Promise<GetCurrentUserResult>

Fetches the currently signed-in user.

Returns: Promise<GetCurrentUserResult>

getIdToken(...)

getIdToken(options?: GetIdTokenOptions | undefined) => Promise<GetIdTokenResult>

Fetches the Firebase Auth ID Token for the currently signed-in user.

Returns: Promise<GetIdTokenResult>

setLanguageCode(...)

setLanguageCode(options: SetLanguageCodeOptions) => Promise<void>

Sets the user-facing language code for auth operations.

signInWithApple(...)

signInWithApple(options?: SignInOptions | undefined) => Promise<SignInResult>

Starts the Apple sign-in flow.

Returns: Promise<SignInResult>

signInWithFacebook(...)

signInWithFacebook(options?: SignInOptions | undefined) => Promise<SignInResult>

Starts the Facebook sign-in flow.

Returns: Promise<SignInResult>

signInWithGithub(...)

signInWithGithub(options?: SignInOptions | undefined) => Promise<SignInResult>

Starts the GitHub sign-in flow.

Returns: Promise<SignInResult>

signInWithGoogle(...)

signInWithGoogle(options?: SignInOptions | undefined) => Promise<SignInResult>

Starts the Google sign-in flow.

Returns: Promise<SignInResult>

signInWithMicrosoft(...)

signInWithMicrosoft(options?: SignInOptions | undefined) => Promise<SignInResult>

Starts the Microsoft sign-in flow.

Returns: Promise<SignInResult>

signInWithPlayGames(...)

signInWithPlayGames(options?: SignInOptions | undefined) => Promise<SignInResult>

Starts the Play Games sign-in flow.

Returns: Promise<SignInResult>

signInWithTwitter(...)

signInWithTwitter(options?: SignInOptions | undefined) => Promise<SignInResult>

Starts the Twitter sign-in flow.

Returns: Promise<SignInResult>

signInWithYahoo(...)

signInWithYahoo(options?: SignInOptions | undefined) => Promise<SignInResult>

Starts the Yahoo sign-in flow.

Returns: Promise<SignInResult>

signInWithPhoneNumber(...)

signInWithPhoneNumber(options: SignInWithPhoneNumberOptions) => Promise<SignInWithPhoneNumberResult>

Starts the sign-in flow using a phone number.

Either the phone number or the verification code and verification ID must be provided.

Only available for Android and iOS.

Returns: Promise<SignInWithPhoneNumberResult>

signInWithCustomToken(...)

signInWithCustomToken(options: SignInWithCustomTokenOptions) => Promise<SignInResult>

Starts the Custom Token sign-in flow.

This method cannot be used in combination with skipNativeAuth on Android and iOS. In this case you have to use the signInWithCustomToken interface of the Firebase JS SDK directly.

Returns: Promise<SignInResult>

signOut()

signOut() => Promise<void>

Starts the sign-out flow.

useAppLanguage()

useAppLanguage() => Promise<void>

Sets the user-facing language code to be the default app language.

addListener('authStateChange', ...)

addListener(eventName: 'authStateChange', listenerFunc: AuthStateChangeListener) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for the user's sign-in state changes.

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all listeners for this plugin.

Interfaces

GetCurrentUserResult

User

GetIdTokenResult

GetIdTokenOptions

SetLanguageCodeOptions

SignInResult

AuthCredential

SignInOptions

SignInCustomParameter

SignInWithPhoneNumberResult

SignInWithPhoneNumberOptions

SignInWithCustomTokenOptions

PluginListenerHandle

AuthStateChange

Type Aliases

AuthStateChangeListener

Callback to receive the user's sign-in state change notifications.

(change: AuthStateChange): void

FAQ

1. What does this plugin do?
   This plugin enables the use of Firebase Authentication in a Capacitor app. It uses the Firebase SDK for Java (Android), Swift (iOS) and JavaScript.
2. What is the difference between the web implementation of this plugin and the Firebase JS SDK?
   The web implementation of this plugin encapsulates the Firebase JS SDK and enables a consistent interface across all platforms. You can decide if you prefer to use the web implementation or the Firebase JS SDK.
3. What is the difference between the native and web authentication?
   For web authentication, the Firebase JS SDK is used. This only works to a limited extent on Android and iOS in the WebViews (see here). For native authentication, the native SDKs from Firebase, Google, etc. are used. These offer all the functionalities that the Firebase JS SDK also offers on the web. However, after a login with the native SDK, the user is only logged in on the native layer of the app. If the user should also be logged in on the web layer, additional steps are required (see here).
4. How can I use this plugin with the Firebase JavaScript SDK?
   See here.

Changelog

See CHANGELOG.md.

License

See LICENSE.