The Firebase JavaScript SDK implements the client-side libraries used by applications using Firebase services.
By default, this plugin signs the user in only on the native layer of the app. In order to use the Firebase JavaScript SDK, a sign-in on the web layer is required. To do this, follow these steps:
- Add Firebase to your JavaScript project
- Set the configuration option
skipNativeAuth
totrue
(see here). - Sign in on the native layer, create web credentials and sign in on the web using
signInWithCredential
(see Examples).
import { FirebaseAuthentication } from '@robingenz/capacitor-firebase-authentication';
import {
getAuth,
GoogleAuthProvider,
OAuthProvider,
PhoneAuthProvider,
signInWithCredential,
} from 'firebase/auth';
const signInWithApple = async () => {
// 1. Create credentials on the native layer
const result = await FirebaseAuthentication.signInWithApple();
// 2. Sign in on the web layer using the id token and nonce
const provider = new OAuthProvider('apple.com');
const credential = provider.credential({
idToken: result.credential?.idToken,
rawNonce: result.credential?.nonce,
});
const auth = getAuth();
await signInWithCredential(auth, credential);
};
const signInWithGoogle = async () => {
// 1. Create credentials on the native layer
const result = await FirebaseAuthentication.signInWithGoogle();
// 2. Sign in on the web layer using the id token
const credential = GoogleAuthProvider.credential(result.credential?.idToken);
const auth = getAuth();
await signInWithCredential(auth, credential);
};
const signInWithFacebook = async () => {
// 1. Create credentials on the native layer
const result = await FirebaseAuthentication.signInWithFacebook();
// 2. Sign in on the web layer using the access token
const credential = FacebookAuthProvider.credential(
result.credential?.accessToken,
);
const auth = getAuth();
await signInWithCredential(auth, credential);
};
const signInWithPhoneNumber = async () => {
// 1. Start phone number verification
const { verificationId } = await FirebaseAuthentication.signInWithPhoneNumber(
{
phoneNumber: '123456789',
},
);
// 2. Let the user enter the SMS code
const verificationCode = window.prompt(
'Please enter the verification code that was sent to your mobile device.',
);
// 3. Sign in on the web layer using the verification ID and verification code.
const credential = PhoneAuthProvider.credential(
verificationId || '',
verificationCode || '',
);
const auth = getAuth();
await signInWithCredential(auth, credential);
};
The dependencies used in these examples:
[email protected]
@robingenz/[email protected]