how to use firebase auth in Polymer 3?

Question

Im very confused cause before I did an authentication with firebase in Polymer 2 but now I cant :( I just have this simple component to test:

 import { LitElement, html } from 'lit-element'; import firebase from '@firebase/app'; import '@firebase/auth'; import '@firebase/firestore'; //import firebase from 'firebase/app'; import '@polymer/paper-button/paper-button.js'; class DataAuth extends LitElement { autenticar(){ firebase.initializeApp( { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "" } ) const autentica = firebase.auth(); var provider = new firebase.auth.GoogleAuthProvider(); autentica.signInWithPopup(provider).then(function(result) { // This gives you a Google Access Token. You can use it to access the Google API. var token = result.credential.accessToken; // The signed-in user info. var user = result.user; console.log(user); // ... }).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); } render() { return html` <paper-button raised @click="${this.autenticar}">Autenticar</paper-button> `; } } customElements.define('data-auth', DataAuth); 

And I import it in view1 in the polymer proyect but I got this error:

And I realy dont know why, Im new in Polymer :(, please I realy apreciate any help

Answer 1

Try to install firebase dependencies outside polymer. Like Index file

index.html

 <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>
 <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-database.js"></script>
 <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-messaging.js"></script>

 <script>
   // Initialize Firebase
   var config = {
     apiKey: "Api - key - String",
     authDomain: "<api-name>.firebaseapp.com",
     databaseURL: "https://<api-name>.firebaseio.com",
     projectId: "<api-name>",
     messagingSenderId: "1013602754277"
   };
   firebase.initializeApp(config);
 </script>

I use Firebase without problem with the above

And check user status inside like: (you may fire this func. after lazy-loading.)

checkUserStatus(){  
    firebase.auth().onAuthStateChanged((user)=> {
      if (user) {
         // User is signed In.
         console.log("signed IN..");                                          
      } else {
        // User is signed out.
         console.log("signed out..");
      }

    });
}

Answer 2

@HakanC thanks a lot, but when I use the command: npm run build (wich acording with the package.json is: "build": "polymer build --auto-base-path && gulp prpl-server", )

I don't know why have this errors :(:

 0 info it worked if it ends with ok 1 verbose cli [ 'C:\\\\Program Files\\\\nodejs\\\\node.exe', 1 verbose cli 'C:\\\\Users\\\\Marcos\\\\AppData\\\\Roaming\\\\npm\\\\node_modules\\\\npm\\\\bin\\\\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'build' ] 2 info using npm@6.0.1 3 info using node@v8.11.1 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle pwa-starter-kit@0.9.0~prebuild: pwa-starter-kit@0.9.0 6 info lifecycle pwa-starter-kit@0.9.0~build: pwa-starter-kit@0.9.0 7 verbose lifecycle pwa-starter-kit@0.9.0~build: unsafe-perm in lifecycle true 8 verbose lifecycle pwa-starter-kit@0.9.0~build: PATH: C:\\Users\\Marcos\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\npm-lifecycle\\node-gyp-bin;C:\\Users\\Marcos\\Dropbox\\proyectos web\\polymer3\\my-app\\node_modules\\.bin;C:\\Program Files (x86)\\Common Files\\Oracle\\Java\\javapath;C:\\ProgramData\\Oracle\\Java\\javapath;C:\\WINDOWS\\system32;C:\\WINDOWS;C:\\WINDOWS\\System32\\Wbem;C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\;C:\\Program Files (x86)\\Microsoft ASP.NET\\ASP.NET Web Pages\\v1.0\\;C:\\Program Files\\Microsoft SQL Server\\110\\Tools\\Binn\\;C:\\Program Files (x86)\\Windows Live\\Shared;C:\\Program Files\\Microsoft\\Web Platform Installer\\;C:\\Program Files\\Calibre2\\;;C:\\Program Files (x86)\\Windows Kits\\8.1\\Windows Performance Toolkit\\;C:\\Program Files\\Microsoft SQL Server\\120\\Tools\\Binn\\;C:\\WINDOWS\\system32;C:\\WINDOWS;C:\\WINDOWS\\System32\\Wbem;C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\;C:\\WINDOWS\\system32\\config\\systemprofile\\.dnx\\bin;C:\\Program Files\\Microsoft DNX\\Dnvm\\;C:\\Program Files\\Git\\cmd;C:\\ProgramData\\ComposerSetup\\bin;C:\\PHP7;C:\\curl-7.58.0\\src;C:\\Program Files\\nodejs\\;C:\\Program Files (x86)\\Panda Security\\WaAgent\\Common;C:\\Program Files (x86)\\Pinnacle\\Shared Files\\;C:\\Program Files\\Microsoft SQL Server\\Client SDK\\ODBC\\130\\Tools\\Binn\\;C:\\Program Files (x86)\\Microsoft SQL Server\\130\\Tools\\Binn\\;C:\\Program Files\\Microsoft SQL Server\\130\\Tools\\Binn\\;C:\\Program Files\\Microsoft SQL Server\\130\\DTS\\Binn\\;C:\\Program Files (x86)\\Microsoft SQL Server\\Client SDK\\ODBC\\130\\Tools\\Binn\\;C:\\Program Files (x86)\\Microsoft SQL Server\\140\\Tools\\Binn\\;C:\\Program Files (x86)\\Microsoft SQL Server\\140\\DTS\\Binn\\;C:\\Program Files (x86)\\Microsoft SQL Server\\140\\Tools\\Binn\\ManagementStudio\\;;C:\\Program Files (x86)\\Compac\\SDK\\Librerias Interfaz;C:\\Program Files\\Microsoft VS Code\\bin;C:\\Program Files (x86)\\Yarn\\bin\\;C:\\RailsInstaller\\Git\\cmd;C:\\RailsInstaller\\Ruby2.1.0\\bin;C:\\Program Files (x86)\\Microsoft VS Code\\bin;C:\\Users\\Marcos\\AppData\\Local\\Microsoft\\WindowsApps;C:\\Users\\Marcos\\AppData\\Local\\Programs\\Fiddler;C:\\Users\\Marcos\\AppData\\Roaming\\Composer\\vendor\\bin;C:\\Users\\Marcos\\AppData\\Local\\GitHubDesktop\\bin;C:\\Users\\Marcos\\AppData\\Local\\Microsoft\\WindowsApps;C:\\Users\\Marcos\\AppData\\Roaming\\npm;C:\\Users\\Marcos\\AppData\\Local\\Yarn\\bin 9 verbose lifecycle pwa-starter-kit@0.9.0~build: CWD: C:\\Users\\Marcos\\Dropbox\\proyectos web\\polymer3\\my-app 10 silly lifecycle pwa-starter-kit@0.9.0~build: Args: [ '/d /s /c', 10 silly lifecycle 'polymer build --auto-base-path && gulp prpl-server' ] 11 silly lifecycle pwa-starter-kit@0.9.0~build: Returned: code: 3 signal: null 12 info lifecycle pwa-starter-kit@0.9.0~build: Failed to exec build script 13 verbose stack Error: pwa-starter-kit@0.9.0 build: `polymer build --auto-base-path && gulp prpl-server` 13 verbose stack Exit status 3 13 verbose stack at EventEmitter.<anonymous> (C:\\Users\\Marcos\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\npm-lifecycle\\index.js:283:16) 13 verbose stack at emitTwo (events.js:126:13) 13 verbose stack at EventEmitter.emit (events.js:214:7) 13 verbose stack at ChildProcess.<anonymous> (C:\\Users\\Marcos\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\npm-lifecycle\\lib\\spawn.js:55:14) 13 verbose stack at emitTwo (events.js:126:13) 13 verbose stack at ChildProcess.emit (events.js:214:7) 13 verbose stack at maybeClose (internal/child_process.js:925:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5) 14 verbose pkgid pwa-starter-kit@0.9.0 15 verbose cwd C:\\Users\\Marcos\\Dropbox\\proyectos web\\polymer3\\my-app 16 verbose Windows_NT 10.0.16299 17 verbose argv "C:\\\\Program Files\\\\nodejs\\\\node.exe" "C:\\\\Users\\\\Marcos\\\\AppData\\\\Roaming\\\\npm\\\\node_modules\\\\npm\\\\bin\\\\npm-cli.js" "run" "build" 18 verbose node v8.11.1 19 verbose npm v6.0.1 20 error code ELIFECYCLE 21 error errno 3 22 error pwa-starter-kit@0.9.0 build: `polymer build --auto-base-path && gulp prpl-server` 22 error Exit status 3 23 error Failed at the pwa-starter-kit@0.9.0 build script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 3, true ]