Implementing Login using Google in a Nativescript iOS application: A step-by-step guide

I've been working on implementing Google's ID provider login in Nativescript using the nativescript-social-login plugin. While it works smoothly on Android, I've hit a roadblock with iOS.

Following the instructions from the plugin creator, I realized that some classes required additional definition files for TypeScript. After researching, I found out that the method to achieve login with Google has changed recently in iOS due to some deprecated pods. Attempting the new approach, I even created a d.ts file for the GIDSignIn delegate as shown below:

declare class GIDSignIn{
   public static sharedInstance(): GIDSignIn;
   public handleURLSourceApplication(url: NSURL, sourceApplication:NSString, annotiation: id): boolean;
}

Despite successfully compiling the application this way, it crashes when I try to tap the login button.

While inspecting the Xcode build, a warning informs me that the Firebase instance has not been configured. How should I proceed with configuring it in the Typescript code?

iosangulartypescriptnativescriptangular2-nativescript

Answer №1

Utilize the nativescript-oauth plugin for social login integration.

Here is an example:

login.component.ts:-

`import * as tnsOAuthModule from 'nativescript-oauth';

public login() {

    tnsOAuthModule.login()

        .then(() => {

            let tokenModule = JSON.stringify(tnsOAuthModule);

            let refereshToken = JSON.parse(tokenModule).instance.tokenResult.refreshToken;

            this.getRefereshActiveToken(refereshToken);
        })

        .catch((er) => {

            console.error('error logging in');

            console.dir(er);

        });

}`

To set up Google authentication, configure the main.ts file with the following code:

`import * as tnsOAuthModule from 'nativescript-oauth';

var myInitOptions: tnsOAuthModule.ITnsOAuthCredentials = {

authority: '',

authorizeEndpoint: '',

tokenEndpoint: '',

clientId: '',

redirectUri: 'urn:ietf:wg:oauth:2.0:oob',

responseType: "code",

scope: 'openid',

};

tnsOAuthModule.initCustom({

credentials: myInitOptions,

cookieDomains: ['http://demoweb.net'],

});`

Add the code below to the info.plist file in App_Resources -> iOS directory for redirecting after successful Google authentication on IOS:

<key>CFBundleURLTypes</key>

<array>

    <dict>

        <key>CFBundleTypeRole</key>

        <string>Editor</string>

        <key>CFBundleURLName</key>

        <string>app_id</string>

        <key>CFBundleURLSchemes</key>

        <array>

            <string>appauth</string>

        </array>

    </dict>

</array>

<key>NSAppTransportSecurity</key>

<dict>

    <key>NSAllowsArbitraryLoads</key>

    <true/>

</dict>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular: Execute a function once all BehaviorSubject subscriptions have been initialized

In order to facilitate the sharing of parameters across components in my Angular application, I have implemented a "global" service as shown below: import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs/BehaviorSu ...

angularangular2-servicesbehaviorsubject

The declaration file for the 'express' module could not be located

Whenever I run my code to search for a request and response from an express server, I encounter an issue where it cannot find declarations for the 'express' module. The error message transitions from Could not find a declaration file for module & ...

typescriptnpmtsconfigtsc

Linting error: Unable to access properties of an undefined object (isStrict)

While setting up ESLint in an Angular project, I encountered an error when running the linter: Oops! Something went wrong! :( ESLint: 8.56.0 TypeError: Cannot read properties of undefined (reading 'isStrict') Occurred while linting C:\User ...

angulareslinttypescript-eslintangular-eslint

Encountering a 500 (Internal Server Error) while attempting to fetch a single document from MongoDB without utilizing the

I am currently developing my first project using the MEAN stack, and I'm facing a challenge with retrieving a single element from MongoDB. The specific page I'm working on is meant to allow users to edit an item from a list displayed on the main ...

node.jstypescriptmongoosemean-stack

What is the process for sending an http get request that provides a JSON array to populate an ngFor directive?

I'm trying to figure out how to make an http get request in order to retrieve a json array of data that I can use within an ngFor loop. The list that needs to be looped through is stored in this.list. Currently, the json file for testing purposes is l ...

typescriptangularangular2-http

It appears that the Cypress test is not taking into account the mat-paginator pageSize

Currently, I am troubleshooting a bug within an integration test that is supposed to verify the functionality of switching between pages using mat-paginator. The paginator has a pageSize set to 20, and the response fixture contains 24 'items'. My ...

angulartestingcypress

Passing data from the main component to a component with a different route is a common practice in

In my main component home.component.ts, I have the following code: ngOnInit() { this.metaService.getMetaCompany() .subscribe((response: Json) => { let metaCompany = <MetaCompany>response.data; this.interactionService.setGlobalMet ...

angular

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

javascriptangularcssionic2angular-animations

Xcode template for creating apps with Split View functionality

I feel completely lost... Recently, I created a new test app with the Split View based application template in Xcode 4. The documentation for the UISplitViewController states that after initializing an instance of this class, two view controllers must be ...

iosipad

A guide to building a versatile component using Ionic 3 and Angular 4

I decided to implement a reusable header for my app. Here's how I went about it: First, I created the component (app-header): app-header.ts: import { Component } from '@angular/core'; @Component({ selector: 'app-header', te ...

angulartypescriptionic-frameworkionic2ionic3

Unable to find solution for 'rxjs-compat/observable/combineLatest'

Recently, I updated my angular project to utilize "rxjs": "^6.3.3" Incorporating the combineLatest operator has caused complications after the upgrade, leading to compilation errors ERROR in ./node_modules/rxjs/observable/combineLatest.js Module not fo ...

angularrxjs

Guide to using Enums in *ngIf statements in Angular 8

I have defined an enum type in my TypeScript file, and I want to use it as a condition in my HTML code. However, when trying to access the "values" of the enum, they appear to be undefined even though I have declared them and inherited from the exported en ...

typescriptenumsangular8

Steps to create a TypeScript function that mimics a JavaScript function

As I look at this javascript code: // find the user User.findOne({ name: req.body.name }, function(err, user) { if (err) throw err; if (!user) { res.json({ success: false, message: 'Authentication failed. User not found.' ...

javascriptnode.jstypescript

Customizing NavigationBarItems and NavigationBarTitle within TabView using SwiftUI

I have been working on modifying the navigation bar title and leading & trailing items in a SwiftUI application. The scenario is as follows: When a user logs in, they are directed to a view within a TabView. Prior to login, there are no navigation bar ...

iosswiftswiftui

Dynamically assigning column values based on object properties

I am currently utilizing the Ionic Framework along with its grid system that is reminiscent of Bootstrap. However, I believe my query leans more towards AngularJS than specific Ionic components. Here is what I have: <ion-col *ngFor="let col of row ...

javascripthtmlangularionic-frameworkionic2

Press the thumbs up button to show your support for a Facebook page with FBL

Currently, I am attempting to like a Facebook page using FBLikeControl. However, I am struggling to determine the correct objectID that needs to be passed. I have experimented by passing the FBAPPID (as acquired from developers.facebook.com) as the object ...

iosfacebook-graph-apifacebook-likefacebook-ios-sdk

What is the proper error type to use in the useRouteError() function in react-router-dom?

In my React project, I am utilizing the useRouteError() hook provided by react-router-dom to handle any errors that may arise during routing. However, I'm uncertain about the correct type for the error object returned by this hook. Currently, I have ...

javascriptreactjstypescriptreact-routerreact-router-dom

Casting types of objects in Angular2 using TypeScript

Trying to extract the model object from the JSON obtained through a http response call. The following JSON represents the body of the http response, { "dataType": "RWSupplier", "partyName": "Lifecare Pharmaceuticals", "partyShortName": null, "partySecon ...

jsontypescriptangular2-routing

When utilizing WPF WebBrowser with a local Angular 8 website, the window.external feature works flawlessly. However, complications arise when

Apologies for any formatting issues, this is my first post. I have been working on updating a legacy app with a new UI. This serves as a proof of concept to demonstrate our ability to create a thin client and host our project online. In my WPF window (.NE ...

.netangularwpfwindow.external

LazyVGrid does not refresh when the .id() is modified

My goal is to update LazyVGrid item properties upon tapping, and it successfully worked with plain Ints but encountered issues when numbers were wrapped in a collection. Here is the code that isn't working: import SwiftUI struct Item : Identifiable ...

iosswiftswiftuilazyvgrid