Are there any methods to incorporate Facebook and Google login into an Ionic progressive web app (PWA)?

After successfully developing an app in Ionic 3 for Android and iOS, I encountered a problem when adding the browser platform. The Facebook and Google login features were not functioning as expected.

Despite the assurance from Ionic documentation that the Facebook plugin is supported in the browser, it was not working for me.

Additionally, I discovered that the Google Plus plugin only works for Android and iOS platforms.

Now I am left wondering how to integrate both Facebook and Google login in a Progressive Web App created with Ionic 3.

I attempted to use the angular4-social-login module without success. I also tried utilizing the JavaScript SDK, but unfortunately, that did not work either.

facebookangulartypescriptgoogle-plusionic3

Answer №1

Using Facebook on a Web Browser:

Once you have included the browser platform:

ionic cordova platform add browser
ionic cordova build browser --prod

Next, on your facebook developer website's settings page, make sure to include your 

server's domain in the app domain
(or use localhost for testing purposes).

https://i.stack.imgur.com/1uEFI.png

To find out more information, visit: browser

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

How can I display an array in reverse order using *ngFor in a template?

Just starting out with Angular and I'm looking to display an array in reverse order. Here's what I have: <ng-container *ngFor="let user of _users.reverse(); let i = index"> <tr> <td>{{ _users[i].firstN ...

angular

The onClick event in HostListener is intermittent in its functionality

While attempting to create a dropdown box in Angular by following these examples, I am encountering inconsistent results. Below is the code I have used: HTML <button (click)="eqLocationDrop()" id="eqLocButton"><i class="fas fa-caret-down">< ...

htmlangulartypescript

Stop the observable based on the data rather than the cause

In my service, I am making http requests to a backend that is beyond my control in order to retrieve marketing page content. There are instances when I need to load multiple pieces of marketing content simultaneously. I have implemented an effect that call ...

angulartypescriptrxjsobservablengrx

Error encountered in Angular testing when component fixture becomes undefined after test execution with subcomponents in version 4.0.0-beta.8

I'm facing a strange issue while testing my Angular code. Setting things up goes smoothly, but when I define subcomponents in the TestBed.configureTestingModule declaration, things start to break. The initial test within a describe block works fine, b ...

angulartestingwebpackkarma-runnerangular-universal

How to convert form fields into JSON format using Angular 2

Currently, I am in the process of learning angular2 and have encountered a roadblock. I have created a form where the values are populated through JSON. The form consists of both pre-filled fields and text input fields where users can enter data and select ...

angulartypescriptangular2-observables

Unable to initialize styles in a newly created Angular CLI project

Just finished setting up a new project with the angular cli. Encountering an issue when trying to link the styles.css file in index.html <link rel="stylesheet" type="text/css" href="styles.css"> Getting the following error in Chrome's dev too ...

cssangulargoogle-chromeangular-cli

The Threejs Raycaster detects collisions with objects even when the ray is just grazing the surface

Within my Vue component, I have integrated a threejs scene and I am facing an issue with selecting objects using the mouse. I am currently using the OnPointerDown event and raycaster to locate objects under the mouse pointer. However, it seems like the ray ...

typescriptvue.jsthree.js

What is the process for setting up a subrouter using React Router v6?

This is the current React Router setup I am using: const router = createBrowserRouter([ { path: "/", element: ( <Page activeNav="home" > <Home /> </Page> ) }, { ...

javascriptreactjstypescriptreact-routerreact-router-dom

Creating a functional component in React using TypeScript with an explicit function return type

const App: FC = () => { const addItem = () => { useState([...items, {id:1,name:'something']) } return <div>hello</div> } The linter is showing an error in my App.tsx file. warning There is a missing return type ...

javascriptreactjstypescript

Solving the issue of refreshing HTML Canvas drawings in Vue3 using the Composition API

In my typescript code base, I have successfully created a Sudoku board by directly manipulating the DOM and utilizing an HTML Canvas element with its API. Now, I am looking to elevate my project to a full website and integrate what I have into a Vue3 proj ...

typescriptvue.jshtml5-canvasvuejs3

Vue-Apollo - The 'value' property is not present in the 'Readonly<Ref<Readonly<any>>>' type

MY CURRENT DILEMMA: In my quest to seamlessly integrate vue-apollo v4 with Typescript, I have encountered a challenge. I am in the process of retrieving data from a simple query using useQuery along with useResult. The default return type of useResult i ...

javascripttypescriptvue.jsvuejs3vue-apollo

Encountered an issue when trying to deserialize the current JSON object while submitting relational data

I have encountered a problem while trying to add a worker to a job, specifically when dealing with the ModelState check. Here are the steps I've taken: Filling out the form Upon submitting the form, I checked the console and found: Name = "test", ...

jsonangularserializationasp.net-web-api2

Troubleshooting issues with Bootstrap's responsiveness configuration

I've been working on creating a responsive user login page using Angular 5. It looks great on full-screen display. https://i.sstatic.net/YQrL5.png However, when I resize the browser window, the responsiveness seems to break. https://i.sstatic.net/4 ...

htmlcssangulartwitter-bootstrapbootstrap-4

Facing issues with integrating Mixpanel with NestJS as the tracking function cannot be located

While utilizing mixpanel node (yarn add mixpanel) in conjunction with NestJS, I have encountered an issue where only the init function is recognized. Despite calling this function, I am unable to invoke the track function and receive the error message: Ty ...

javascriptnode.jstypescriptnestjsmixpanel

Error in Angular: trying to access property 'genre' of an undefined object

I am currently developing a simple app inspired by a tour of heroes (official angular tutorial). However, I have encountered an issue that I cannot seem to resolve, possibly due to my lack of understanding in basic programming concepts. Here is the code s ...

angularundefined

Is the return value a result of destructuring?

function display(): (number, string) { return {1,'my'} } The code above is displaying an error. I was hoping to use const {num, my} = print(). How can I correctly specify the return type? ...

javascripttypescript

ngOnInit unable to properly listen to event stream

I've been trying to solve a persistent issue without success. The problem involves the interaction between three key elements: the HeaderComponent, TabChangingService, and TabsComponent. Within the HeaderComponent, there are three buttons, each with a ...

angulartypescriptangular6angular-router

Working with intricately structured objects using TypeScript

Trying to utilize VS Code for assistance when typing an object with predefined types. An example of a dish object could be: { "id": "dish01", "title": "SALMON CRUNCH", "price": 120, ...

javascriptjsontypescriptobject

Tips on delaying the return of the Angular compiler until the subscription is complete

I'm facing an issue with a function that needs to return a value while containing a subscription. The problem I'm encountering is that the return line is being executed before the subscription ends, testFunc(){ let objectType; let modul ...

angulartypescriptasynchronoussubscribe

Changes in the styles of one component can impact the appearance of other

When it comes to styling my login page, I have specific stylesheets that I include in login.component.ts. For all the common CSS files, I have added them in the root index ("index.html") using the traditional method. However, after a user logs into the sys ...

angulartypescript