@nativescript/google-signin

A plugin that allows you to authenticate users with Google Sign-In.

Contents

• Installation
• Android prerequisites
• iOS prerequisites
• Use @nativescript/google-signin
  • Sign in
  • Styling the GoogleSignInButton
• API
  • GoogleSignin
    • configure()
      • Configuration
    • signIn()
    • signInSilently()
    • isSignedIn()
    • playServicesAvailable()
    • signOut()
    • disconnect()
    • getTokens()
    • getCurrentUser()
  • User
  • GoogleSignInButton

Installation

Install the plugin by running the following command at the root of the project.

npm install @nativescript/google-signin

Android prerequisites

1. To use GoogleSignIn for Android, visit Add Firebase to your Android project and follow the 2 steps below.

• Create a Firebase project

• Register your app with Firebase

You don't need to include the google-services.json file mentioned in Add a Firebase configuration file in your app unless you are using other Google services that require it.

2. Enable the OAuth APIs that you want, using the Google Cloud Platform API manager. Make sure you've filled out all the required fields in the console for OAuth consent screen. Otherwise, you may encounter APIException errors.

iOS prerequisites

1. This plugin requires iOS 9.0+.

2. To use GoogleSignIn for iOS, set up the app with Firebase with the following steps at Add Firebase to your Apple project:

   1. Create a Firebase project
   2. Register your app with Firebase
   3. Add a Firebase configuration file, GoogleService-Info.plist. to App_Resources/iOS/.

3. Open Xcode

   1. Right-click on the Runner directory and select Add Files to Runner.
   2. Select GoogleService-Info.plist from the file manager.
   3. Select the Runner target from the dialog that appears.

4. Add the CFBundleURLTypes attributes below to the App_Resources/iOS/Info.plist file.

<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <!-- TODO Replace this value: -->
            <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
            <string>com.googleusercontent.apps.292142294722-23nmrq9mn8rhpqipjc1bt4qecga3qgsf</string>
        </array>
    </dict>
</array>
<!-- End of the Google Sign-in Section -->

Note that according to https://developer.apple.com/sign-in-with-apple/get-started, starting June 30, 2020, the apps that use login services must also offer a Sign in with Apple option when submitting to the Apple App Store. For that, consider using the@nativescript/apple-sign-in plugin.

Use @nativescript/google-signin

Sign in

To sign in a user with GoogleSignIn, follow the steps below.

1. Register and add the GoogleSignInButton to your markup to be able to initiate GoogleSigIn.

2. Register and add the GoogleSignInButton to your markup to be able to initiate GoogleSigIn.

• Core

<Page xmlns:ui="@nativescript/google-signin">
    <ui:GoogleSigninButton tap="handleSignIn" colorScheme='auto' colorStyle='standard'/>
</Page>

• Angular

Register the button as follows:

import { registerElement } from '@nativescript/angular';
registerElement('GoogleSignInButton', () => require('@nativescript/google-signin').GoogleSignInButton);

Next, add it to your html file setting the desired option for colorScheme and colorStyle as:

<GoogleSignInButton colorScheme='auto' colorStyle='standard' (tap)="yourGoogleSigninFunction()"></GoogleSignInButton>

• Vue

Register the button by adding the following code to the main.ts file.

registerElement('GoogleSignInButton',()=> require("@nativescript/google-signin").GoogleSignInButton)

Then use it in a .vue file as follows:

<GoogleSignInButton colorScheme='auto' colorStyle='standard' @tap="yourGoogleSigninFunction"></GoogleSignInButton>

2. Call the signIn() method on GoogleSignInButton tap

Before you call the signIn() or the signInSilently() method to sign in the user, call configure() to initialize Firebase.

import { GoogleSignin } from '@nativescript/google-signin';

try {
    await GoogleSignin.configure();
    const user = await GoogleSignin.signIn();
} catch (e) {}

Styling the GoogleSignInButton

GoogleSignInButton is a View instance so you can use the View class styling properties. Additionally, the plugin offers the colorScheme and colorStyle properties.

API

GoogleSignIn

The class that provides GoogleSignIn API. It has the following methods:

configure()

await GoogleSignIn.configure(configuration)

Specifies the properties of the sign-in request, such as scopes,accountName, etc.

Call this method before calling the signIn() or signInSilently() method. Call it only once, after your app starts.

The configuration parameter is an optional Configuration object.

Configuration

The Configuration object has the following properties. All properties are optional.

signIn()

user: User = await GoogleSignin.signIn()

Prompts a modal to let the user sign in into the application.

signInSilently()

user: User = await GoogleSignin.signInSilently()

isSignedIn()

isUserSignedIn: boolean
 = GoogleSignin.isSignedIn()

Checks whether the user is currently signed in.

playServicesAvailable()

isPlayServicesAvailable: boolean = await GoogleSignin.playServicesAvailable();

Checks if device has Google Play Services installed. Always resolves to true on iOS.

Presence of up-to-date Google Play Services is required to show the sign in modal.

signOut()

GoogleSignin.signOut()

Signs out the current user.

disconnect()

await GoogleSignin.disconnect()

Disconnects the current user.

getTokens()

tokens: { idToken: string; accessToken: string;} = await GoogleSignin.getTokens()

Resolves with an object containing { idToken: string, accessToken: string, } or rejects with an error. Note that using accessToken for identity assertion on your backend server is discouraged.

getCurrentUser()

user : User | null = GoogleSignin.getCurrentUser()

This method resolves with null or a User object.

User

The user object has the following members:

GoogleSignInButton

License

Apache License Version 2.0