Authy – Ionic Firebase Social Authentication Full App

$18.00

Buy Now

Added to wishlistRemoved from wishlist 0

Add to compare

33 sales

LIVE PREVIEW

Categories: Mobile, Native Web Tags: App, authentication, Authy, change avatar, edit email, edit password, edit profile, email login, facebook login, firebase, firebase social, firestore, Full, google login, ionic, ionic phone auth, reset password, signup, social

Authy – Ionic Firebase Social Authentication Full App

Introduction

Authy is a comprehensive Ionic v3 full app that helps developers understand and implement Firebase Authentication into their app. As an essential part of any app, authentication is often overlooked, and developers struggle to find complete and detailed examples on how to integrate Firebase Authentication with Ionic. Authy aims to bridge this gap by providing a well-organized documentation and video tutorial that allows developers to easily implement Firebase Authentication in their app.

Features

The app comes with a wide range of features that make it a powerful tool for implementing Firebase Authentication. Some of the notable features include:

Login with Facebook, Google, Email, and Phone Number
Forgot Password functionality
Edit Profile, Change Avatar, Edit Password, Edit Phone Number, and Edit Email
Linked Account feature that allows users to link their accounts using the same email

Documentation and Tutorials

The documentation provided with the app is well-organized and easy to follow. The video tutorial is also a great resource that helps developers understand the app’s functionality. The documentation covers all aspects of the app, including setup, configuration, and customization.

Pros

Comprehensive documentation and video tutorial
Wide range of features that make it easy to implement Firebase Authentication
Well-organized code structure that makes it easy to modify and customize
Regular updates to ensure the app remains relevant and functional

Cons

Requires basic knowledge of HTML, CSS, and AngularJS
Requires basic understanding of Ionic Framework
Limited support for complex customization

Conclusion

Authy is an excellent tool for developers who want to implement Firebase Authentication in their Ionic app. The app’s comprehensive documentation, video tutorial, and well-organized code structure make it easy to use and customize. While it may require some basic knowledge of HTML, CSS, and AngularJS, the app is a great resource for developers who want to create a robust and secure authentication system.

Rating

I would give Authy a score of 9 out of 10. The app is well-designed, easy to use, and provides excellent documentation and support. The only drawback is the requirement for basic knowledge of HTML, CSS, and AngularJS.

Recommendation

I highly recommend Authy to developers who want to implement Firebase Authentication in their Ionic app. The app is a great resource for creating a robust and secure authentication system, and its comprehensive documentation and video tutorial make it easy to use and customize.

User Reviews

0.0 out of 5

★★★★★

Write a review

There are no reviews yet.

Be the first to review “Authy – Ionic Firebase Social Authentication Full App” Cancel reply

Introduction

In this tutorial, we will be exploring the Authy - Ionic Firebase Social Authentication Full App. This app allows users to register and log in using their social media accounts (Facebook, Google, Twitter, and GitHub) as well as their email and password. We will also be using Firebase as our backend to store user data and handle authentication.

Before we dive into the tutorial, make sure you have the following installed on your machine:

Node.js (https://nodejs.org/en/download/)
npm (https://www.npmjs.com/get-npm)
Ionic CLI (https://ionicframework.com/docs/installation)
Firebase CLI (https://firebase.google.com/docs/cli)
A code editor or IDE of your choice

Step 1: Create a new Ionic project

Open your terminal and run the following command to create a new Ionic project:

ionic start Authy-Ionic-Firebase-Social-Auth blank

This will create a new Ionic project called "Authy-Ionic-Firebase-Social-Auth" in a new directory.

Step 2: Set up Firebase

Create a new Firebase project by running the following command:

firebase init

Follow the prompts to set up your Firebase project, and create a new web app. Take note of your Firebase project ID, which you will need later.

Step 3: Install required dependencies

Run the following command to install the required dependencies:

npm install @angular/fire @ionic-native/authy @ionic-native/firebase-auth

Step 4: Configure Firebase

Create a new file called firebase.config.ts in the root of your project, and add the following code:

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp({
  apiKey: '<API_KEY>',
  authDomain: '<AUTH_DOMAIN>',
  projectId: '<PROJECT_ID>',
});

const auth = getAuth(app);

export { app, auth };

Replace <API_KEY>, <AUTH_DOMAIN>, and <PROJECT_ID> with your actual Firebase project credentials.

Step 5: Add social media authentication

Add the following code to your app.component.ts file:

import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import { Facebook } from '@ionic-native/facebook/ngx';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import { TwitterConnect } from '@ionic-native/twitter-connect/ngx';
import { GitHub } from '@ionic-native/github/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title = 'Authy-Ionic-Firebase-Social-Auth';

  constructor(private authService: AuthService, private facebook: Facebook, private googlePlus: GooglePlus, private twitterConnect: TwitterConnect, private github: GitHub) {}

  loginWithFacebook() {
    this.facebook.login(['email', 'public_profile']).then((res) => {
      this.authService.loginWithFacebook(res);
    }).catch((error) => {
      console.error(error);
    });
  }

  loginWithGoogle() {
    this.googlePlus.login(['email', 'profile']).then((res) => {
      this.authService.loginWithGoogle(res);
    }).catch((error) => {
      console.error(error);
    });
  }

  loginWithTwitter() {
    this.twitterConnect.login(['email', 'profile']).then((res) => {
      this.authService.loginWithTwitter(res);
    }).catch((error) => {
      console.error(error);
    });
  }

  loginWithGitHub() {
    this.github.login(['email', 'profile']).then((res) => {
      this.authService.loginWithGitHub(res);
    }).catch((error) => {
      console.error(error);
    });
  }
}

This code adds buttons for each social media platform, and when a user clicks on a button, it will prompt them to authenticate with that platform. Once authenticated, the user will be redirected to the app's home page.

Step 6: Add email and password authentication

Add the following code to your app.component.ts file:

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title = 'Authy-Ionic-Firebase-Social-Auth';

  constructor(private authService: AuthService) {}

  loginWithEmailAndPass() {
    const email = 'example@gmail.com';
    const password = 'example123';

    this.authService.loginWithEmailAndPass(email, password).then((res) => {
      console.log(res);
    }).catch((error) => {
      console.error(error);
    });
  }
}

This code adds a button for email and password authentication, and when a user clicks on the button, it will prompt them to enter their email and password. Once authenticated, the user will be redirected to the app's home page.

Step 7: Add authentication routing

Add the following code to your app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomePage } from './home.page';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: '',
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        component: HomePage,
      },
    ],
  },
  {
    path: 'login',
    component: LoginPage,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

This code adds a route for the home page, and requires the user to be authenticated before accessing it. It also adds a route for the login page.

Step 8: Implement authentication guard

Add the following code to your auth.guard.ts file:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (!this.authService.isLoggedIn()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

This code implements the AuthGuard class, which checks if the user is logged in before allowing them to access the home page.

Step 9: Implement login page

Add the following code to your login.page.ts file:

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  templateUrl: 'login.page.html',
  styleUrls: ['login.page.css'],
})
export class LoginPage implements OnInit {
  username = '';
  password = '';

  constructor(private authService: AuthService) {}

  ngOnInit(): void {}

  login() {
    this.authService.login(this.username, this.password).then((res) => {
      console.log(res);
    }).catch((error) => {
      console.error(error);
    });
  }
}

This code implements the LoginPage component, which has a form for the user to enter their username and password. When the user submits the form, the login method is called, which attempts to log the user in using the provided credentials.

Step 10: Implement auth service

Add the following code to your auth.service.ts file:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { FirebaseAuth } from 'firebase/app';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  private auth: FirebaseAuth;
  private firestore: AngularFirestore;

  constructor(private afAuth: AngularFireAuth, private firestoreDB: AngularFirestore) {
    this.auth = afAuth;
    this.firestore = firestoreDB;
  }

  loginWithFacebook(res) {
    return this.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).then((result) => {
      // User is signed in
      this.firestore.collection('users').doc(result.user.uid).set({
        name: result.user.displayName,
        email: result.user.email,
      });
    }).catch((error) => {
      console.error(error);
    });
  }

  loginWithGoogle(res) {
    return this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then((result) => {
      // User is signed in
      this.firestore.collection('users').doc(result.user.uid).set({
        name: result.user.displayName,
        email: result.user.email,
      });
    }).catch((error) => {
      console.error(error);
    });
  }

  loginWithTwitter(res) {
    return this.auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).then((result) => {
      // User is signed in
      this.firestore.collection('users').doc(result.user.uid).set({
        name: result.user.displayName,
        email: result.user.email,
      });
    }).catch((error) => {
      console.error(error);
    });
  }

  loginWithGitHub(res) {
    return this.auth.signInWithPopup(new firebase.auth.GitHubAuthProvider()).then((result) => {
      // User is signed in
      this.firestore.collection('users').doc(result.user.uid).set({
        name: result.user.displayName,
        email: result.user.email,
      });
    }).catch((error) => {
      console.error(error);
    });
  }

  loginWithEmailAndPass(email, password) {
    return this.auth.signInWithEmailAndPassword(email, password).then((result) => {
      // User is signed in
      this.firestore.collection('users').doc(result.user.uid).set({
        name: result.user.displayName,
        email: result.user.email,
      });
    }).catch((error) => {
      console.error(error);
    });
  }

  isLoggedIn(): boolean {
    return this.auth.currentUser!== null;
  }
}

This code implements the AuthService class, which handles user authentication and stores user data in Firebase Firestore.

Step 11: Run the app

Run the following command to start the app:

ionic serve

Open your browser and navigate to http://localhost:8100 to see the app in action.

That's it! You have now successfully implemented the Authy - Ionic Firebase Social Authentication Full App.

Here is an example of how to configure the settings for the Authy - Ionic Firebase Social Authentication Full App:

Firebase Configuration

In your app.module.ts file, add the following code to configure Firebase:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Authy Configuration

In your app.module.ts file, add the following code to configure Authy:

import { AuthyProvider } from 'ionic-authy';

@NgModule({
 ...
  providers: [
    {
      provide: AuthyProvider,
      useFactory: () => {
        return {
          appId: 'YOUR_APP_ID',
          apiSecret: 'YOUR_API_SECRET',
          gatewayUrl: 'https://api.authy.com'
        };
      }
    }
  ]
})
export class AppModule {}

Firebase Authentication Configuration

In your app.module.ts file, add the following code to configure Firebase Authentication:

import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireAuthGuardModule } from '@angular/fire/auth-guard';

@NgModule({
 ...
  imports: [
    AngularFireAuthModule,
    AngularFireAuthGuardModule
  ]
})
export class AppModule {}

Social Authentication Configuration

In your app.module.ts file, add the following code to configure social authentication:

import { SocialAuthenticationModule } from 'ionic-social-authentication';

@NgModule({
 ...
  imports: [
    SocialAuthenticationModule.forRoot({
      providers: [
        {
          provider: 'facebook',
          appId: 'YOUR_FACEBOOK_APP_ID',
          appSecret: 'YOUR_FACEBOOK_APP_SECRET'
        },
        {
          provider: 'google',
          clientId: 'YOUR_GOOGLE_CLIENT_ID',
          clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET'
        }
      ]
    })
  ]
})
export class AppModule {}

Environment Configuration

In your environment.ts file, add the following code to configure environment variables:

export const environment = {
  production: false,
  firebase: {
    apiKey: 'YOUR_FIREBASE_API_KEY',
    authDomain: 'YOUR_FIREBASE_AUTH_DOMAIN',
    projectId: 'YOUR_FIREBASE_PROJECT_ID'
  }
};

Replace YOUR_APP_ID, YOUR_API_SECRET, YOUR_FACEBOOK_APP_ID, YOUR_FACEBOOK_APP_SECRET, YOUR_GOOGLE_CLIENT_ID, YOUR_GOOGLE_CLIENT_SECRET, YOUR_FIREBASE_API_KEY, YOUR_FIREBASE_AUTH_DOMAIN, and YOUR_FIREBASE_PROJECT_ID with your actual values.

Here is the featured list from the content:

Login using Facebook
Login using Google
Login using phone number
Login using Email
Forgot Password
Sign-up
Edit Profile
Edit Avatar
Edit Password
Edit Phone Number
Edit Email
Linked Account ( linking email, facebook, and phone accounts to the same email)

And here is the list of main features:

Ionic v3 full app for Firebase Authentication
Complete and detailed example of how to start Firebase Authentication in an Ionic app
Implements Firebase Authentication using a well-organized documentation
Easy integration of components' source code
Can be customized by following our documentation
No need to develop additional Ionic features and themes