Firebase auth listener on nuxt - firebase

I'm a bit new to vue and nuxt, and I'm using firebase authentication with a custom token generation.
I'm looking for the best place to put the onAuthChange listener,
I'm trying to figure out if this should be implemented as middleware or maybe it could go somehow into the nuxt config
obviously, I want it to listen to the entire application all the time.

I found what I was looking for if someone else will ever encounter this question as well,
I've moved the listener to plugins and added the plugin to the nuxt.config.js file under the plugins section.

Related

Firebase Action URL in development and production

I have a custom action URL for password reset in my firebase project.
Here, I'm using the dev mode URL: http://localhost:3000/auth/reset-password
Now if I want to deploy the app, it looks as if I will have to change the URL back to my custom domain name like www.mydomain.com/auth/reset-password.
Will I have to do this every time, or is there any work around?
What I really did was that I used nextjs to check if I was in production or development, and based on that, I navigate my users. On the firebase dashboard, I didn't do anything.
I used the ResetPassword function and set the property of the actionUrl based on the above condition.

Why do I keep receiving an error when initializing my firebase project while setting up firestore?

I am learning how to set up and host a webpage through firebase, and when I attempt to initialize the project (by running firebase init in the firebase CLI) every time I reach the firestore setup portion, it always results in the same error.
It looks like you haven't used Cloud Firestore in this project before. Go to https://console.firebase.google.com/project/resume-site-599bc/firestore to create your Cloud Firestore database
When I copy and paste the link, it brings me to the firebase console page and says "your action was forbidden" no matter what I do. I have tried to go into the console settings and made sure all of the correct APIs are enabled. But there seems to be little help when I tried googling the issue.
Thank you.
I had the very same and error and fixed it with #MS29's method. More verbose for simplicity:
In the Firebase Dashboard, go to Project Settings -> General
Set "Default GCP resource location" again.
After that, the Firestore can be found again.
So even though I already had the project created and I created my Firestore database, my: Default GCP resource location didn't select properly when creating the project. Once I fixed this, it had no problem connecting to my database.
I've faced the same problem with Angular 14.2.0 and firebase 19.14. The solution for me was as follow:
I've checked the project list by using firebase cli:
firebase projects:list
There I noticed that the Resource Location ID wasn't set for any reasons. So I opened the settings of my firebase-project using the console (https://console.firebase.google.com/) and on project settings tab u can set the GCP. That's it
Look like you haven't create project on your firebase account
So firebase ask you go into the link to create project.
For the problem of "your action was forbidden",
it seem to be the problem of multi google accounts.
Google still work quite bad on multi accounts sometime.
You can try access the google firebase console main page by the link below.
https://console.firebase.google.com/u/0/
https://console.firebase.google.com/u/1/
The last number is the number of user. You can change it if you have many google accounts.
P.S. The user order will change if you logout.
Most likely that you don't have the project created in firebase. Either create a new project by going to
https://firebase.corp.google.com/u/0/
or enable Firebase for an existing GCP project by choosing that project in the add project page
it's happening same to me too, but in my case:
I already created the database at Firestore Cloud *at their website
for now I'm still troubled with it, if I have solution.
#update
hello, I'm in bandwagon when it comes to this problem: [firebase init firestore not work with existing project]
I'm using firebase CLI version 10.6.0
but somehow I manage to deal with it, here's my solution/timeline:
I install using firebase login --no-localhost because encounter problems with firebase login
encountered with errors: cannot install firestore but hosting part can.
try to reset database, created again but still get error: cannot install firestore
then I logout, then login using ONLY firebase login, not the firebase login --no-localhost
bang! solved!
hope it helps~

NextJs custom server

I've set a custom server from the example but, my question is...
Can the server code access the NextJs code?
I mean, NextJs is built with webpack, therefore packed in its own context, so if I want to initialize something (let's say, database, logging system, etc.) in the server before NextJs has started, and then access it from NextJs... is it possible? I don't see how unless server code and NextJs code are in the same bundle, is it?
Yes, I guess there are some hacks that can be used, like importing files in runtime with __non_webpack_require__... but that seems like a hack (?) and only in one direction.
Any other better option?
If you use SSR in NextJS, you can access to APIs before rendering.
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.
It fetches your data upon a user requesting your website everytime.
Thatmeans no matter what you build first on your server. Next.js will fetch for it every time. The comment above me sent the correct link. https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
TO view all data fetching techniques from next.js visit: https://nextjs.org/docs/basic-features/data-fetching/overview
PLease comment back to this to see if this helped, or if we missunderstood the question, so that we can help solve this issue, or if you resolved it. happy coding!

How to configure firebase cdn / caching in Vue.js app?

I have developed my project using vue.js webpack template. I want to configure firebse cdn/caching. But have no idea what to do..
I have gone through the document https://firebase.google.com/docs/hosting/manage-cache
And found that
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
to be added. But wheredo i add in my vuejs project before deploying. Please if anyone could help me.
The method res.set sets the response’s HTTP header field to value. This link you have provided, refers to setting the headers when using Google Cloud Functions. You can take a look at this Github link containing an example about Google Cloud Functions which include how to set these headers in NodeJS. To get more general information about res.set() and how you can set these headers in your own application, you can also take a look at the official documentation.

Authorization with Meteor and React-router

I'm using the react-router package to handle routes in a Meteor app, and I'd like to check if the user is logged in and is authorized to see specific routes. How can I do this?
I suggest checking out Base - it's an awesome Meteor boilerplate. If you want to see how routing works specifically, checkout:
https://github.com/themeteorchef/base/blob/master/imports/startup/client/routes.js
https://github.com/themeteorchef/base/blob/master/imports/ui/containers/AppNavigation.js
https://github.com/themeteorchef/base/blob/master/imports/ui/components/AppNavigation.js

Resources