Code Monkey home page Code Monkey logo

ionicthemes / ionic5-firebase-authentication Goto Github PK

View Code? Open in Web Editor NEW
113.0 7.0 59.0 4.99 MB

๐Ÿ”ฅ Ionic Firebase Authentication Starter - FREE starter app with Firebase Authentication with social providers such as Google, Facebook and Twitter. Includes complete tutorial to learn how to integrate Firebase Auth into your Ionic 5 application.

Home Page: https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps

TypeScript 58.47% HTML 16.37% JavaScript 3.43% SCSS 21.73%
ionic5 firebase-authentication ionic-tutorial ionic ionic-firebase ionic-angular angular-fire angular9 ionic-framework ionic-starter

ionic5-firebase-authentication's Introduction

Ionic Firebase Authentication

Enjoy this free Ionic 5 Firebase demo app and save tons of hours of work!

About this ionic demo

This repo is the code of an Ionic 5 starter app that we created as part of the post: Ionic Firebase Authentication Tutorial. In this post we explain how to perform Social Sign In with Firebase from an Ionic application.

Most apps need to know the identity of the user who is using it. Knowing a user's identity allows an app to securely save user data in the cloud and provide a personalized experience across all of the user's devices.

In this Ionic + Firebase tutorial you will learn how to create an Ionic Framework Application with Firebase Authentication. We will show you how to configure both the Firebase and the Ionic 5 App to enable authentication with social providers such as Google, Facebook and Twitter and also with Email and Password.

As an example we built this Ionic Framework application that allows users to log in and log out using all of the above mentioned authentication options. Once they log in, they will see a profile page with their basic profile info taken from the authentication provider.

Read the complete post in https://ionicthemes.com/tutorials/about/firebase-authentication-in-ionic-framework-apps.

Ionic Firebase Starter

This repo is a simple ionic 5 starter app with three pages:

  • Sign In
  • Sign Up
  • Profile

Find more Ionic tutorials and starter apps in https://ionicthemes.com

Demo

Install this Ionic 5 Firebase App

npm install

Browse the app

ionic serve

Get a premium Ionic 5 Starter App with Firebase Integration

If you want a ready-made example of how to use Firebase Authentication in Ionic 5 with Capacitor configurations for iOS and Android, check Ionic 5 Full Starter App PRO. We spent many hours configuring and testing everything so that you don't have to.

This template has more than 100 carefully designed views and components, it will help you grasp the best practices and new concepts of Ionic 5.

It also includes a very complete integration with Firebase which includes:

  • Firebase Authentication with different providers:
    • Facebook sign in
    • Twitter sign in
    • Google sign in
    • Email/Password sign in
    • This implementation works in all environments: web, PWA, mobile apps with Capacitor.
  • Firebase CRUD
  • Firebase queries

ionic5-firebase-authentication's People

Contributors

dbertolini avatar dependabot[bot] avatar djabif avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

ionic5-firebase-authentication's Issues

Error: [email protected] postinstall: `node scripts/build.js`

i got error when 'ionic serve'

Ionic:

ionic (Ionic CLI) : 4.12.0 (C:\Users\xx\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : not installed

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : not available
Cordova Plugins : not available

System:

NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10

App crashes in android studio emulator

Opened the project in android studios and it built successfully, opened in the emulator and crashes after the splash screen before any content is loaded without any error messages consistently.

Auth no Redirect to app

Hi, when i authenticate eith google provider opens a apge in mobile browser but does not reditect to te app.

signInWithGoogle() { return new Promise<FirebaseUserModel>(((resolve, reject) => { if (this.platform.is('crodova')){ this.googlePlus.login({ 'scopes': '', // optional, space-separated list of scopes, If not included or empty, defaults to profileandemail. 'webClientId': '12345-letters.apps.googleusercontent.com', // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required. 'offline': true }).then((response) => { const googleCredential = firebase.auth.GoogleAuthProvider.credential(response.idToken); firebase.auth().signInWithCredential(googleCredential) .then((user) =>{ resolve(); }); }, (err) => { reject(err); }); } else { this.firebaseAuth.auth .signInWithPopup(new firebase.auth.GoogleAuthProvider()) .then((user) => { resolve(); }, (err) => { reject(err); }) } })) }

Authentication service is not working with the latest version of the Firebase

Hi,

The authentication service is not working with the current version of Firebase:

package.json file

"dependencies": {
    "@angular/fire": "^6.1.4",
    "firebase": "^8.2.7",
  },

I've changed the wrong imports but it is still failing in the execution time:

firebase-auth.service.ts file

//import { User, auth } from 'firebase/app';
import {User} from '@firebase/auth-types';
import auth from 'firebase/firebase-auth'; 

Regards.

Missing catch error for non Cordova platform

In the file "auth.service.ts" is missing the "err" response to reject for non Cordova platforms.

Trying this app with "ionic serve -l" I realized tht when the user closes the pop up window at Google Login, it crash with a message error.

ionic-error-message

Example for doGoogleLogin function:

### Before:

doGoogleLogin(){
return new Promise((resolve, reject) => {
if (this.platform.is('cordova')) {
this.googlePlus.login({
'scopes': '', // optional, space-separated list of scopes, If not included or empty, defaults to profile and email.
'webClientId': environment.googleWebClientId, // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
'offline': true
}).then((response) => {
const googleCredential = firebase.auth.GoogleAuthProvider.credential(response.idToken);
firebase.auth().signInWithCredential(googleCredential)
.then((user) => {
resolve();
});
},(err) => {
reject(err);
});
}
else{
this.afAuth.auth
.signInWithPopup(new firebase.auth.GoogleAuthProvider())
.then((user) => {
resolve();
});
}
})
}

### After:

doGoogleLogin(){
return new Promise((resolve, reject) => {
if (this.platform.is('cordova')) {
this.googlePlus.login({
'scopes': '', // optional, space-separated list of scopes, If not included or empty, defaults to profile and email.
'webClientId': environment.googleWebClientId, // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
'offline': true
}).then((response) => {
const googleCredential = firebase.auth.GoogleAuthProvider.credential(response.idToken);
firebase.auth().signInWithCredential(googleCredential)
.then((user) => {
resolve();
});
},(err) => {
reject(err);
});
}
else{
this.afAuth.auth
.signInWithPopup(new firebase.auth.GoogleAuthProvider())
.then((user) => {
resolve();
},(err) => {
reject(err);
}
);
}
})
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.