Step 1: Import the AuthService
In each of the authentication components (signup.component.ts
, login.component.ts
, logout.component.ts
), import the AuthService:
import { AuthService } from '../services/auth.service';
Step 2: Inject the AuthService
In the constructor of each component, inject the AuthService:
constructor(private authService: AuthService) { }
Step 3: Bind Form Inputs to Service Functions
In the onSubmit()
function of the signup.component.ts
and login.component.ts
files, call the respective AuthService function:
For signup:
onSubmit(form) {
const { email, password } = form.value;
this.authService.signUp(email, password).then(() => {
// handle successful sign up
}).catch((error) => {
// handle error
});
}
For login:
onSubmit(form) {
const { email, password } = form.value;
this.authService.signIn(email, password).then(() => {
// handle successful login
}).catch((error) => {
// handle error
});
}
Step 4: Handle Form Submission
In the logout.component.ts
file, call the signOut()
function when the logout button is clicked:
logout() {
this.authService.signOut().then(() => {
// handle successful logout
}).catch((error) => {
// handle error
});
}
Step 5: Display Error or Success Messages
To display error or success messages, you can use Ionic's ToastController
. First, import and inject it in each component:
import { ToastController } from '@ionic/angular';
constructor(private authService: AuthService, private toastController: ToastController) { }
Then, create a function to present a toast:
async presentToast(message: string) {
const toast = await this.toastController.create({
message: message,
duration: 2000
});
toast.present();
}
You can then use this function to display a message when an operation is successful or fails:
this.authService.signUp(email, password).then(() => {
this.presentToast('Signed up successfully');
}).catch((error) => {
this.presentToast('Error signing up: ' + error.message);
});
Repeat this for the login and logout operations.
Now, your authentication UI should be fully integrated with the Firebase Authentication Service. Users should be able to sign up, log in, and log out, and they should see appropriate messages when these operations succeed or fail.