Firebase Authentication with custom domain

See also questions close to this topic

• How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

  My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

  This my .env file

  REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
  REACT_APP_authDomain=XXXXX.firebaseapp.com
  REACT_APP_projectId=XXXX
  REACT_APP_storageBucket=XXXXX.appspot.com
  REACT_APP_messagingSenderId=4997390XXXXX
  REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
  REACT_APP_measurementId=G-M1XDXXXXXX
  

  This my firebase config file

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId: process.env.REACT_APP_measurementId,
  };
  
  when I debugging firebaseConfig object
  
  console.log(firebaseConfig.apiKey);  ==========> undefined 
  console.log(firebaseConfig.authDomain);  ==========> undefined 
  console.log(firebaseConfig.projectId);  ==========> undefined 
  console.log(firebaseConfig.storageBucket); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  console.log(firebaseConfig.appId); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  
  

  client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
• How to order comments in firebase firestore by createdAt

  I have a document in which there is a comments array of objects and each object has createdAt property. I want to sort all the comments that are inside the comments array using the createdAt property, so, a new comment comes to the top.

  I did some research and found that we can do this in firebase's real-time database but I want to do the ordering of data using firestore.

  Here is my code:

  import { useEffect, useRef, useState } from "react"
  // firebase import
  import { doc, onSnapshot, orderBy, query } from "firebase/firestore"
  
  import { db } from "../firebase/config"
  
  export const useDocument = (c, id, o) => {
    const [document, setDocument] = useState(null)
    const [error, setError] = useState(null)
  
    // realtime document data
    useEffect(() => {
      let docRef = doc(db, c, id)
  
      if (o) {
        docRef = query(docRef, orderBy("createdAt", "desc")) // this is not working
      }
  
      const unsubscribe = onSnapshot(
        docRef,
        (snapshot) => {
          // need to make sure the doc exists & has data
          if (snapshot.data()) {
            setDocument({ ...snapshot.data(), id: snapshot.id })
            setError(null)
          } else {
            setError("No such document exists")
          }
        },
        (err) => {
          console.log(err.message)
          setError("failed to get document")
        }
      )
  
      // unsubscribe on unmount
      return () => unsubscribe()
    }, [c, id])
  
    return { document, error }
  }
  
  

  createdAt property:
• How to group firebase data in flutter with DateTime?

  I am making a chat application in flutter using firebase. I want to show a header with the date whenever the date changes. How can I group messages in flutter coming from firebase on the basis of date and show a header with the changed date?

  I have tried GroupedListView package but I was not able to retrieve the chatmessages successfully.
• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• Can you make complete apps using Flutter & Dart or just the UI part of an app?

  I'm confused about what Flutter framework actually does, I know that it uses Dart and have heard that both of them can be used to create cross-platform apps.

  But Wikipedia defines Flutter as a "UI Framework", so my question is, can you make a complete app (for mobile) which also has backend part (communicates with a database) built entirely using Flutter & Dart and not only the UI part?

  If you didn't get my question, here is an example:

  Suppose a front-end web developer works on client side programming in his job, and the backend logic is written by another backend developer.

  When it comes to mobile app development, suppose as a Flutter developer, your job is to create apps, but does that mean that as a Flutter developer, you'll only write the front-end logic and leave the backend part for another backend developer like in web world? Can Flutter developers also write the backend of an app using only Flutter & Dart? If not, then who writes the backend of a mobile app and what tools/languages/frameworks does he uses?
• HTTP authentication with PHP for specific pages

  I have been trying to fix one issue for the last two weeks but didn't find any solution to my problem. So, I am trying to add HTTP authentication with PHP 7.4.

  The main issue

  I have to add restrictions for specific URLs ( For example, https://example.com/photos ) with PHP, and I am using the below code. But the problem is I have to show logged-in users on other pages, too. For example, if I didn't log in, then anything to show, but if I am logged in need to show username and password on all pages, but again I have to restrict only specific pages.

  PHP Code:

  Header("WWW-Authenticate: Basic realm='Members Only' valid-user");
  http_response_code(401);
  echo "<script> window.location.replace( 'https://example.com/sign-up' ) </script>";
  exit;
  

  .htaccess Code:

  AuthUserfile PATH_TO_THE_FILE/.htpasswd
  AuthName "Members Only"
  AuthType Basic
  AuthBasicProvider file
  

  I hope someone will help me soon.
• Acces to XMLHttpRequest at 'https://api-link/login' from origin 'http://localhost/3000' has been blocked by cors policy. (React, , firebase, JWT))

  When I try to implement a secure login system in React application with firebase using JSON Web Token (JWT) I am getting this error: Acces to XMLHttpRequest at 'https://api-link/login' from origin 'http://localhost/3000' has been blocked by cors policy. I am using node js for the backend.

  I also use cors middleware:

  const cors = require("cors");
  app.use(cors());
  

  My Backend Code:

    const verifyJWT = (req, res, next) => {
    const authHeader = req.headers.authorization;
    console.log(authHeader);
  
    if (!authHeader) {
      return res.status(401).send({
        message: "unauthorized access",
      });
    }
    const token = authHeader.split(" ")[1];
    jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, decoded) => {
      if (err) {
        return res.status(403).send({ message: "forbidden access" });
      } else {
        console.log("decoded", decoded);
        req.decoded = decoded;
        next();
      }
    });
  };
  

  Backend login route

    app.post("/login", async (req, res) => {
    const user = req.body;
    const accessToken = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET, {
      expiresIn: "1d",
    });
    res.send({ accessToken });
  });
  

  My Client-side code:

  const handleSubmit = async (e) => {    
  e.preventDefault();
  await signInWithEmailAndPassword(values.email, values.password);
  const email = values.email;
  
  const { data } = await axios.post(
    "https://stark-sands-89628.herokuapp.com/login",
    { email }
  );
  localStorage.setItem("accessToken", data.accessToken)};
  
• How to Fix Firebase invalid API key

  I'm using my API key stored in a .env.local file. And it setup correctly but not working

  assert.ts:128 Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).
      at createErrorInternal (assert.ts:128:1)
      at _assert (assert.ts:153:1)
      at register.ts:67:1
      at Component.instanceFactory (register.ts:90:1)
      at Provider.getOrInitializeService (provider.ts:318:1)
      at Provider.initialize (provider.ts:242:1)
      at initializeAuth (initialize.ts:66:1)
      at getAuth (index.ts:44:1)
      at Module../src/firebase.init.js (firebase.init.js:22:1)
      at Module.options.factory (react refresh:6:1)
  

  I don't know why React is giving me an error. I intialized firebase in the following file

  // Import the functions you need from the SDKs you need
  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries
  
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId:process.env.REACT_APP_measurementId
  };
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  export default auth;
• Knowing when the javascript SDK has made a definite decision as to whether the user is logged in or not upon initial load

  I'm trying to accomplish something rather simple here but it's turning out to be a bit of a head-scratcher.

  Obviously we have the handy onAuthStateChanged event which allows me to listen to changes to auth status. So it's easy to be informed when the user logs in or out.

  The issue is that during the initial application load, there doesn't seem to be a reliable way to tell if the user is simply not logged at all or if the sign-in is being processed in the background.

  For example, if the user has a stored session (logged in from last time), and returns, initially onAuthStateChanged will return null, and then afterward it's triggered again and returns the user.

  If the user is not logged in, it will return null and then do nothing.

  The problem is I can't really tell if the first null is telling me that the user is not logged in at all versus the user is not logged in yet because it's being processed in the background.

  I would like a way where I could know for sure either way.

  Thanks!
• API gateway not accessible using a custom domain name set up using Route 53

  We are using an AWS API gateway for our APIs. These APIs are mapped to a custom domain name set up using Amazon Route53. We have 3-4 different environments for different stages (dev, stage, prod, etc). The one in prod works fine, however, recently, the APIs in the other environment's are not accessible using the custom domain name. All the domain mappings and A records and CNAME records have been added in Route53 and it worked until 2 days ago. There have been no major updates to the APIs either and suddenly they aren't accessible using the domain name. We mainly use the Ireland region. They can be accessed using the Invoke URL of the APIs. We have our frontend in s3 which accesses the APIs, I have also tested using another REST client, the same issue persists. Can someone help with this or point to something to troubleshoot?

  I am posting it here as I was not able to reach out to AWS Support or post on their forum.
• Google Cloud Custom Domains NameCheap - "WWW" not working

  I have purchased a domain on https://www.namecheap.com/. I also have a Cloud Run service running on Google Cloud. I verified my domain on Google and I added it as a Custom Domain. In return Google gave me the DNS records

  All I had to do was to go to NameCheap and add these records which I did.

  

  I can accces my site website like this https://abcd.com but not like this https://www.abcd.com with (WWW). Any ideea why?

  Later Edit: here is the error

  CURL error:
• Flutter web deploying to custom domain not working

  I am trying to upload my flutter web on the custom domain using cPanel. Here is my custom domain.

  

  Here is how I have uploaded my files from build->web.

  

  But still I am getting following error when I try to visit my website.

  

  Here is my index.html file

  <!DOCTYPE html>
  <html>
  <head>
      <!--
        If you are serving your web app in a path other than the root, change the
        href value below to reflect the base path you are serving from.
  
        The path provided below has to start and end with a slash "/" in order for
        it to work correctly.
  
        For more details:
        * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
  
        This is a placeholder for base href that will be replaced by the value of
        the `--base-href` argument provided to `flutter build`.
      -->
      <base href="$FLUTTER_BASE_HREF">
  
      <meta charset="UTF-8">
      <meta content="IE=Edge" http-equiv="X-UA-Compatible">
      <meta name="description" content="A new Flutter project.">
  
      <!-- iOS meta tags & icons -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="apple-mobile-web-app-title" content="ali_patente_main">
  
      <meta name="google-signin-client_id"
            content="592741627721-4m52dnuaensfj8u2cqb3iijmlnr08t5n.apps.googleusercontent.com">
      <meta name="google-site-verification" content="g3hot9RVL3LWijecM2J-F-OOSxGE7Chne7lGt9t2_Xc"/>
  
      <link rel="apple-touch-icon" href="icons/Icon-192.png">
  
      <title>ali_patente_main</title>
      <link rel="manifest" href="manifest.json">
  </head>
  <body>
  <script>
      // Import the functions you need from the SDKs you need
  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  import { getFirestore } from "firebase/firestore";
  import { getStorage } from "firebase/storage";
  import { getAnalytics } from "firebase/analytics";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries
  
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyDROViVM7xDdXsxjHHwo2-NYeWQV23K54Q",
    authDomain: "ali-patente-e2bbc.firebaseapp.com",
    databaseURL: "https://ali-patente-e2bbc.firebaseio.com",
    projectId: "ali-patente-e2bbc",
    storageBucket: "ali-patente-e2bbc.appspot.com",
    messagingSenderId: "592741627721",
    appId: "1:592741627721:web:e86a3dabf0ebd37fd98c98",
    measurementId: "G-1JF7N5YZNG"
  };
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  
  
  </script>
  <script>
      var serviceWorkerVersion = null;
      var scriptLoaded = false;
      function loadMainDartJs() {
        if (scriptLoaded) {
          return;
        }
        scriptLoaded = true;
        var scriptTag = document.createElement('script');
        scriptTag.src = 'main.dart.js';
        scriptTag.type = 'application/javascript';
        document.body.append(scriptTag);
      }
  
      if ('serviceWorker' in navigator) {
  
        window.addEventListener('load', function () {
  
          var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
          navigator.serviceWorker.register(serviceWorkerUrl)
            .then((reg) => {
              function waitForActivation(serviceWorker) {
                serviceWorker.addEventListener('statechange', () => {
                  if (serviceWorker.state == 'activated') {
                    console.log('Installed new service worker.');
                    loadMainDartJs();
                  }
                });
              }
              if (!reg.active && (reg.installing || reg.waiting)) {
  
                waitForActivation(reg.installing || reg.waiting);
              } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
  
                console.log('New service worker available.');
                reg.update();
                waitForActivation(reg.installing);
              } else {
  
                console.log('Loading app from service worker.');
                loadMainDartJs();
              }
            });
  
  
          setTimeout(() => {
            if (!scriptLoaded) {
              console.warn(
                'Failed to load app from service worker. Falling back to plain <script> tag.',
              );
              loadMainDartJs();
            }
          }, 4000);
        });
      } else {
  
        loadMainDartJs();
      }
  </script>
  </body>
  </html>
  

  Is there any step that I've missed? Is there any thing that I've done wrong?