Google Sign-in for your NativeScript applications
npm install @nativescript/google-signinA plugin that allows you to authenticate users with Google Sign-In.
Install the plugin by running the following command at the root of the project.
``cli`
npm install @nativescript/google-signin
1. To use GoogleSignIn for Android, visit Add Firebase to your Android project and follow the 2 steps below.
- 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. Generate debug SHA-1 fingerprint and add it to your Firebase project.
Generate the SHA-1 fingerprint for the debug keystore on your machine and add it to your app's Firebase project. Failure to do so will result in the Error: 10 error.
To generate the SHA-1 fingerprint for the debug keystore with the following commands. For the debug keystore, the password is android.
- macOS/Linux
`cli`
keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore
- Windows
`cli`
keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore
3. 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.
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/.OAuth Client ID
4. Enter Google Cloud and choose your project created from firebase. Access the Apis and Services -> Credentials section and add a new credential of type . In application type choose iOS. Return to the Credentials screen and enter your new key in the OAuth 2.0 Client ID section. Copy Client ID and iOS URL Scheme for next step.CFBundleURLTypes
5. Add the and GIDClientID attributes below to the App_Resources/iOS/Info.plist file.
`xml`
> 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.
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.
- Core
`xml`
- Angular
Register the button as follows:
`ts`
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:`xml`
#### Vue
To register the button, add the following code to the main.ts file.
`ts `
registerElement('GoogleSignInButton',()=> require("@nativescript/google-signin").GoogleSignInButton)
Then use it in a .vue file as follows:
`xml`
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. If you do want to set any configuration options, you can pass an empty object {} as a parameter to configure.
`ts
import { GoogleSignin } from '@nativescript/google-signin';
try {
await GoogleSignin.configure({});
const user = await GoogleSignin.signIn();
} catch (e) {}
`
GoogleSignInButton is a View instance so you can use the View class styling properties. Additionally, the plugin offers the colorScheme and colorStyle properties.
API
The class that provides GoogleSignIn API. It has the following methods:
#### configure()
`ts`
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.
| Property | Type
|:---------|:-----
| scopes | string[] signInOptions
| | 'default' \| 'games'
| | string
| | string
| | string
| | string
---
#### signIn()
`ts`
user: User = await GoogleSignin.signIn()
Prompts a modal to let the user sign in into the application.
---
#### signInSilently()
`ts`
user: User = await GoogleSignin.signInSilently()
---
#### isSignedIn()
`ts`
isUserSignedIn: boolean
= GoogleSignin.isSignedIn()
Checks whether the user is currently signed in.
---
#### playServicesAvailable()
`ts`
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()
`ts`
GoogleSignin.signOut()
Signs out the current user.
---
#### disconnect()
`ts`
await GoogleSignin.disconnect()
Disconnects the current user.
---
#### getTokens()
`ts`
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 for identity assertion on your backend server is discouraged.
---
#### getCurrentUser()
`ts`
user : User | null = GoogleSignin.getCurrentUser()
This method resolves with null or a User object.
#### User
The user object has the following members:
| Property | Type | Description
|:---------|:-----|:------------
| id | string | _readonly_displayName
| | string | _readonly_email
| | string | _readonly_givenName
| | string | _readonly_familyName
| | string | _readonly_idToken
| | string | _readonly_accessToken
| | string | _readonly_grantedScopes
| | string[]| _readonly_photoUrl
| | string | _readonly_serverAuthCode
| | string | _readonly_requestScopes(scopes: string[])
| | Promise | See User for the properties of IUser
| | com.google.android.gms.auth.api.signin.GoogleSignInAccount \| GIDGoogleUser | Platform-specific instance.
#### GoogleSignInButton
| Property | Type
|:---------|:-----
| colorScheme| "dark" \| "light" \| "auto"
| | "standard" \| "wide" \| "icon"`
Apache License Version 2.0