Issue
// Enviroment
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
export const environment = {
production: false
};
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "SUS",
authDomain: "SUS",
projectId: "SUS",
storageBucket: "Sus",
messagingSenderId: "Sus",
appId: "Sus",
measurementId: "Sus"
};
// Initialize Firebase
const firebase = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebase);
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(firebase);
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
// signup.page.ts
import { Component, OnInit } from '@angular/core';
import { App } from '@capacitor/app';
import { NavController } from '@ionic/angular';
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
@Component({
selector: 'app-signup',
templateUrl: './signup.page.html',
styleUrls: ['./signup.page.scss'],
})
export class SignupPage implements OnInit {
constructor(private navCtrl: NavController) { }
gotologin() {
this.navCtrl.navigateForward('login');
}
SignUp() {
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
}
ngOnInit() {
}
}
// signup.page.html
<ion-header>
<ion-toolbar>
<ion-title>Sign Up</ion-title>
</ion-toolbar>
</ion-header>
<div class="wrapper">
<ion-item lines="none">
<ion-label position="floating">Name</ion-label>
<ion-input type="text" placeholder="Firstname Lastname"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="floating">Email</ion-label>
<ion-input type="text" placeholder="Email"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="floating">Password</ion-label>
<ion-input type="text" placeholder="password"></ion-input>
</ion-item>
<ion-button (click)="SignUp()">Sign In</ion-button>
</div>
<ion-content>
</ion-content>
<ion-footer>
<div class="text" (click)="gotologin()">
Already a Member? Sign In
</div>
</ion-footer>
ERROR
ERROR
src/app/signup/signup.page.ts:19:42 - error TS2304: Cannot find name 'email'.
19 createUserWithEmailAndPassword(auth, email, password)
~~~~~
ERROR
src/app/signup/signup.page.ts:19:49 - error TS2304: Cannot find name 'password'.
19 createUserWithEmailAndPassword(auth, email, password)
~~~~~~~~
I created a tabs ionic framework and created the pages login and signup now i want to have the signup page popup when there isnt a session cookie but my signup doesnt work. I want to create a login and registration function for my notepad app. But I get an error at the registration stuff even tho i added the auth on my firebase with email activated. Please help me :(
Solution
You have to use another dependencies and plugin.
ionic cordova plugin add cordova-plugin-firebase-authentication
npm install @awesome-cordova-plugins/firebase-authentication
Your signup.page.ts
need to be like this:
import { FirebaseAuthentication } from '@awesome-cordova-plugins/firebase-authentication/ngx';
constructor(private firebaseAuthentication: FirebaseAuthentication) { }
...
this.firebaseAuthentication.createUserWithEmailAndPassword('test@gmail.com', '123')
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
Check the official documentation of Firebase Authentication from Ionic,
and plugin's GitHub repo, to undestand how to configure your google-services.json
and/or GoogleService-Info.plist
, instead of to configure in environment.ts
Answered By - SidiBecker
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.