Firebase Auth SignInWithRedirect not working as expected on Ionic, Cordova

arushgupta2007 commented 4 years ago

Version info

Angular:

Angular CLI: 10.0.1
Node: 14.5.0
OS: linux x64

Firebase: "firebase": "^7.17.1" (package.json)

AngularFire: "angularfire2": "^5.4.2" (package.json)

Other (e.g. Ionic/Cordova, Node, browser, operating system): Output of Ionic info

Ionic:

   Ionic CLI                     : 5.4.16 (/usr/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.901.11
   @angular-devkit/schematics    : 9.1.11
   @angular/cli                  : 9.1.11
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 11 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   NodeJS : v14.5.0 (/usr/bin/node)
   npm    : 6.14.6
   OS     : Linux 5.6

How to reproduce these conditions

Hi, I am using Ionic, cordova. I would like to add user authentication in it. this.afAuth.signInWithRedirect(new firebase.auth.GoogleAuthProvider()) works, it opens the browser at <firebase-project-name>.firebaseapp.com but after I have signed in, it redirects to localhost/sign-in in the chrome browser (which of course gives a 404), I would like it to redirect it to my app, with the user data (currently user data has not reached my app).

Steps to set up and reproduce

create a blank ionic, cordova, angular app
run npm install @angular/fire firebase
create a new firebase project, say it is example_firebase_project
add a web app to the firebase project
get the firebaseConfig and add it in your environments.ts file

in app.module.ts add the following:


...
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule, AngularFireDatabase } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from 'src/environments/environment';

@NgModule({ declarations: [AppComponent, ...], entryComponents: [], imports: [ ... AngularFireModule.initializeApp(environment.firebaseConfig), AngularFireDatabaseModule, AngularFireAuthModule ], providers: [ ... AngularFireDatabase, ], })


- create new page login with `ionic g page login`
- add the following: 
```ts
...
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase'

@Component({
  selector: 'app-login,
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage implements OnInit {
  user;
  displayName;
  constructor(private afAuth: AngularFireAuth) {
    afAuth.authState.subscribe(user => {
      if (!user) {
        this.displayName = null;        
        return;
      }
      this.displayName = user.displayName;      
    });
  }
  signInWithGoogle() {
    this.afAuth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())
    .then(() => {
      return this.afAuth.getRedirectResult().then(result => {
        // let token = result.credential.
        this.user = result.user;
        console.log("Yeah!");
        console.log(this.user);        
      })
    }).catch((err) => {
      console.error(err);
    })
  }

  signOut() {
    this.afAuth.signOut();
  }
}

open login.page.html and use this:


<ion-header>
<ion-toolbar>
<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>

{{ displayName }} Login

Logout

- in your config.xml, edit the id on the widget element to match your app's id
- Add android app in the firebase console with app id exactly the same app id in wrote in the last step
- Enable and create a dynamic link domain, say it is `exmaple.page.link`
- Enable Google sign in in the firebase console in Authentication -> Sign in Methods
- Install these plugins:

ionic cordova plugin add cordova-plugin-buildinfo --save ionic cordova plugin add cordova-universal-links-plugin-fix --save ionic cordova plugin add cordova-plugin-browsertab --save ionic cordova plugin add cordova-plugin-inappbrowser --save

- Add this code in your config.xml inside you widgets element, before `<platform name="android">`:
```html
<universal-links>
    <host name="example.page.link" scheme="https" />
    <host name="example_firebase_project.firebaseapp.com" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

Replace example.page.link with your own dynamic link domain, and replace example_firebase_project.firebaseapp.com with you own firebase project url.
Add this in your config.xml inside your widgets element before the universal-links element (added in last step): <preference name="AndroidLaunchMode" value="singleTask" />
Test App on real mobile phone

Expected behaviour

After sign in, It redirects back to app

Actual behaviour

After sign in, it redirects to url: localhost/login in the chrome browser

hiepxanh commented 4 years ago

interesting, I offen use signin with popup, which case do you need to signin with redirect?

this capacitor plugin using signin with popup: https://github.com/baumblatt/capacitor-firebase-auth/blob/master/src/providers/facebook.provider.ts

arushgupta2007 commented 4 years ago

Hi, Sorry for late reply. I had tried both sign in with popup and sign in with redirect I am using a library which supports only cordova, so I cannot use capacitor. Thanks

madHorse54 commented 4 years ago

I got the same issue.

In the Firebase docs @https://firebase.google.com/docs/auth/web/cordova I found this:

Note: If you are using the Ionic framework, the latest version of that framework should be used to ensure the app is served from origins with the file:// or ionic:// scheme. This is required so that Firebase Auth can properly handle signInWithRedirect operations. Firebase Auth will treat http://localhost origins as web-based browser apps even if they are rendered in a Cordova environment.

Tried to change the Scheme in config.xml adding to the android platform section

<preference name="Scheme" value="ionic" /> but this broke the app.

Any idea ?

Thanks

jamesdaniels commented 3 years ago

closing as it doesn't appear to be an AngularFire bug, feel free to continue discussions however

angular / angularfire