Angular Fire 7 canActivate: Enhancing Security Measures in Your

Just starting out with angular 13 and angular fire 7 for a new app.

Ran into a nullInjector error when using AngularFireAuthGuard.

import { AngularFireAuthGuard } from '@angular/fire/compat/auth-guard';

Switched to AuthGuard and now everything is working smoothly.

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

Is this the correct and recommended approach? Or should I be providing any additional configurations to use AngularFireAuthGuard?

Working imports include:

import {redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/compat/auth-guard';
import { AuthGuard } from '@angular/fire/auth-guard';
javascriptangulartypescriptfirebaseangularfire

Answer №1

Make sure to implement the ...canActivate method

import { canActivate } from '@angular/fire/compat/auth-guard';

const adminOnly = () => hasCustomClaim('admin');
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
const redirectLoggedInToItems = () => redirectLoggedInTo(['items']);
const belongsToAccount = (next) => hasCustomClaim(`account-${next.params.id}`);

export const routes: Routes = [
    { path: '',             component: AppComponent },
    { path: 'login',        component: LoginComponent,    ...canActivate(redirectLoggedInToItems) },
    { path: 'items',        component: ItemListComponent, ...canActivate(redirectUnauthorizedToLogin) },
    { path: 'admin',        component: AdminComponent,    ...canActivate(adminOnly) },
    { path: 'accounts/:id', component: AdminComponent,    ...canActivate(belongsToAccount) }
];

This code snippet was retrieved from the AngularFire documentation found at this GitHub link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cannot find solutions for all parameters for [object Object] in Angular 2

Encountering an error when attempting to navigate to a component that utilizes the angular2-google-maps module. The specific error message is: Can't resolve all parameters for [object Object] (?). ; Zone: angular ; Task: Promise.then ; Unable to ...

javascripttypescriptangularsystemjs

I must update the menu to show only one sub-menu at a time, ensuring that multiple menus cannot be displayed simultaneously

When I click on a menu option, it displays correctly, but when I click on another option, both are displayed. The goal is to only display one at a time. https://i.sstatic.net/J6vLf.png $('.sub-menu ul').hide(); $(".sub-menu a").click( ...

javascripthtmljquerycssfrontend

Exploring JSON data with JQuery: A comprehensive guide to looping through with each

I am currently facing an issue with looping through cached JSON data obtained from an Ajax call. Specifically, I keep receiving the error message 'Cannot read property 'title' of undefined'. Can someone provide assistance? $.each(cach ...

javascriptjqueryjson

What is the best way to retrieve form values on the server in nextJs?

I'm facing an issue with passing form data to my API endpoint in nextJS. I have set up the form using Formik and Yup for validation. Oddly, when I check the console on the client side, I can see the user input values just fine, but on the server side, ...

javascriptnext.jsserver-side-renderingformikyup

PHP contact form with AJAX functionality without page redirection

I'm currently working on a page that includes a contact form. The issue I'm facing is that when I click on "submit," the form redirects me to another page. What I actually want is for the page not to redirect, but instead display the success mes ...

javascriptphpjqueryhtmlajax

"Sticky Top Button That Stays in Place When Scrolling | Innovative CSS & jQuery

I've been inspired by the "Proceed to checkout" button on amazon.com and I want to recreate it. However, I'm facing a challenge as their website is not responsive and I can't find a way to view a device user agent in Chrome. To see what I&ap ...

javascriptjquerycss

Are you searching for the origin of a dynamic dropdown widget or database?

Currently, I am browsing through and I have a query regarding accessing all available classes/options for the courses in a semester. There is a class locator on the top left of the page with a dynamic drop-down menu. Can anyone suggest how I can access ...

javascripthtmldatabase

How to stop cursor from changing on link click in Google Chrome

Have you ever noticed that when you click on a link in Chrome (but not Safari or Firefox), the cursor changes from pointer to arrow? Is there a way to prevent this behavior so that the pointer remains even after clicking, while still hovering over the link ...

javascriptcssgoogle-chromecursor

Using NodeJS and Express together with Ajax techniques

I am currently developing a web application that utilizes Ajax to submit a file along with some form fields. One unique aspect of my form is that it allows for dynamic input, meaning users can add multiple rows with the same value. Additionally, the form i ...

javascriptjqueryajaxnode.jsexpress

The functionality of the "this" keyword appears to be malfunctioning

I've been grappling with the concept of the this keyword in JavaScript and decided to create this script to test it out: function click(){ this.innerHTML="changed"; } However, when I tried to use it in this HTML: <button id="clicker" onclick ...

javascripthtmlthis

NGRX Store: Unable to modify the immutable property '18' of the object '[object Array]'

While attempting to set up an ngrx store, I encountered 7 errors. Error Messages: TypeError: Cannot assign to read only property '18' of object '[object Array]' | TypeError: Cannot assign to read only property 'incompleteFirstPass ...

javascriptangulartypescriptfrontendngrx

Is there a substitute for the bind function?

While delving into Functional programming and optimizing V8 code, I became curious about the optimizability of the bind function by V8. Upon inspecting the native JavaScript code, I stumbled upon these lines: var newfn = function() { // Combine the s ...

javascriptnode.jsoptimizationnativev8

next-intl failing to identify the primary language setting

When testing next-intl for the app directory in the Next.js v13.4.0, I encountered an issue where the default locale was not recognized. Despite following the documentation step by step, I also faced significant challenges with the client-side version in p ...

reactjstypescriptnext.jsinternationalizationnext-intl

Troubleshooting TypeScript Modules in Visual Studio 2015 Update 2: Fixing the 'require' Undefined Error

While working in Visual Studio 2015 Enterprise with Update 2 installed, I decided to create a new TypeScript project called TypeScriptHTMLApp1 using the default template and settings. As part of this project, I added a new TypeScript file named log.ts and ...

javascripttypescriptvisual-studio-2015

Testing child components with the @output directiveWould you like to learn

Exploring the testing of a child component's @output feature in Angular 2 is my current goal. My aim is to utilize a mock version of the child component's @output functionality to trigger a function within the parent component for testing purpose ...

angulartypescriptunit-testing

How to properly pass the this value when unit testing a Vuex action in TypeScript?

Currently, I am working with Vuex in a TypeScript configuration and facing challenges while attempting to unit test an action due to difficulty in setting the this parameter of the action method. The action looks something like this: export const login: ...

typescriptunit-testingvue.jsjestjsvuex

"Troubleshooting the failure of the alert function to work properly when loading content

I am working on a webpage named index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Co ...

javascriptajax

Design of Angular project structure

Building an app in Angular involves consuming various APIs and providing options for users to select, which are then recorded and sent back to the server. The design of the app is structured as follows: All common logic is placed in the Main Controller, ...

javascriptangularjsarchitecture

Transmit blank data array in JSON format

After checking the array with var_dump and confirming that it contains data, I encountered an issue where json_encode was not sending any data. Here is the code snippet in question: for($i=0;$i<count($dados_atividades)-1;$i++) { $arr[$i+1][ ...

javascriptphparraysjson

Is there a way to link dynamic server fields with VueJS?

How can I bind data posted by the server with Vue.js in order to display the data instead of field names? <script> module.exports = { data: function () { return { filedNameFromServer: ['{{filed1}}' ...

javascriptvue.jsvue-resourcevue-component