Google Signin

@nativescript/google-signin #

Table of Contents #

• Installation

• Prerequisites

  • Android
  • iOS

• Usage

  • Signing In
  • GoogleSignInButton
    • Core
    • Angular

• API _ GoogleSignin _ configure() _ Configuration _ signIn() _ signInSilently() _ isSignedIn() _ playServicesAvailable() _ signOut() _ disconnect() _ getTokens() _ getCurrentUser() _ User * GoogleSignInButton (#playservicesavailable)

Installation #

npm install @nativescript/google-signin

Prerequisites #

Android #

1. To access Google Sign-In, you need to register your application. You don't need to include the google-services.json file in your app unless you are using 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 #

1. This plugin requires iOS 9.0+.

2. First register your application.

3. Add the GoogleService-Info.plist. obtained from step 2. to App_Resources/iOS/.

4. 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.

5. 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 -->

Usage #

Signing In #

To sign in the user, call the signIn() or the signInSilently() method. However, ensure to call configure() before calling any of those methods.

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

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

GoogleSignInButton #

Core #

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

import { GoogleSignin } from '@nativescript/google-signin'
export function handleSignIn(args) {
  try {
    await GoogleSignin.configure()
    const user = await GoogleSignin.signIn()
  } catch (e) {}
}

Angular #

Register the button in the module.ts file:

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

And then it can be called from your html file choosing the desired option for colorScheme and colorStyle as:

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

Vue #

To register the button, add 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>

Styling the signin button #

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 GoogleSignin class 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