CODEWITHSUNDEEP
angularfirebasefirebase-authenticationgoogle-cloud-firestorefirebase-security
Ratnabh Kumar Rai
Ratnabh Kumar Rai

Reputation: 584

Angular Firestore Authentication(receiving null value in the credential)

I am tryind to add authentication on Angular (using cloud firestore as a database) .Here i changed the rules of the database

service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}

Now when i login i am receivng this as a output in the console

https://ibb.co/DKzDqhd

I am receiving null value in my credential and i move on to my component where i read the data from database and display them i am receiving the error as

core.js:12501 ERROR FirebaseError: Missing or insufficient permissions. at new FirestoreError (http://localhost:4200/vendor.js:89506:28)

.component.ts

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { Component, OnInit} from '@angular/core';
import { ProductsService } from '../services/products.service';
import { ItemsService } from '../services/items.service';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {
products;
categories;
query;
filteredproducts;
subscription: Subscription;

constructor(private prservice: ProductsService, private iservice: 
ItemsService, private activatedrouter: ActivatedRoute) { }

ngOnInit() {
   this.subscription = this.iservice.getdata().subscribe(data => {
   this.products = data;
   this.activatedrouter.queryParams.subscribe(p => {
   this.query = p['category'];
   this.filteredproducts = this.categories?this.products.filter(p => 
   p.select === this.query):this.products;
  });
 });
 this.subscription = this.iservice.getitems().subscribe(categ => {
 this.categories = categ;
 });
 }

 OnDestroy() {
    this.subscription.unsubscribe();
 }
 }

signup component 

import { AuthService } from './../auth.service';
import { NgForm } from '@angular/forms';
import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.scss']
})

export class SignupComponent implements OnInit {
@ViewChild('f') form:NgForm
constructor(private authservice:AuthService) { }

ngOnInit() {

}



onsubmit(f){
const email=f.email
const pass=f.password
this.authservice.signupuser(email,pass)


}

}

signin component

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

@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.scss']
 })


export class SigninComponent implements OnInit {
constructor(private authservice:AuthService){}
ngOnInit() {
}
onsubmit(f){
const email=f.email
const pass=f.password
this.authservice.signinuser(email,pass)
} 
}

auth service

import { Injectable } from '@angular/core';
import * as firebase from 'firebase';
@Injectable({
providedIn: 'root'
})

export class AuthService {
constructor() {  }

signupuser(email:string,pass:string){
firebase.auth().createUserWithEmailAndPassword(email,pass).catch(
  err=>console.log(err)
)

}
signinuser(email:string,pass:string){
firebase.auth().signInWithEmailAndPassword(email,pass).then(
  response=>console.log(response)
)
.catch(
  err=>console.log(err)
)
}
}

But if change my rules of database to 

service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}

I successfully read the data from database

Upvotes: 0

Views: 732

Answers (1)

German Gonzalez
German Gonzalez

Reputation: 311

It seems that you are not accessing correctly because the credential value returned by auth.service is null. Check that, the problem may be there.

Upvotes: 1

Related Questions