We are building a web app using firebase. We are using firebase hosting to host static files like CSS, images, and javascript. We are also using firebase functions to make web app dynamic.
const app = express();
...
app.use(express.static(__dirname + '/public'));
app.get('/', (req,res) => {
res.render('index');
});
I have a signIn.js in public folder and hosted on Firebase Hosting. When I try to access "firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier) {}" function in signin.js, I get an error that "Firebase" is not found.
I want to send OTP on user phone using Firebase. Now I am confused whether we should handle it on the client side in hosted JS files or we have to handle it at server side in server.js.
Also, how could I invoke a function in server.js files hosted on firebase functions from static js file hosted on firebase hosting?
firebase.auth().signInWithPhoneNumber is client side only. You also need to render an invisible reCAPTCHA with it too which can only be done client side. If you are using the Firebase Admin SDK, it allows you to create a user or update an existing user with a phone number but it assumes you verified the number via your own means.
If you need to provide authenticated access to some http endpoints via Firebase Functions, you can send the Firebase ID token of the phone authenticated user to that endpoint (you can get it on the client via currentUser.getIdToken()) and verify it via the Admin SDK verifyIdToken(idToken).
Related
I have a api (node.js) running on https://localhost:3002 which is using a self signed cert I generated using this
https://trendoceans.com/how-to-create-https-server-in-node-js/
And I have a web app running from vite tooling. Also in https. When I make a all from the web app to the api, I get
GET https://localhost:3002/create net::ERR_CERT_AUTHORITY_INVALID
How can I get this to work?
I'm really new to html, css, javascript and all kind of web development. After I coded my first own website, I'd like to play a little with communcation between the browser and a server.
I'd like to be able to access a website hosted on my PC (using my PC as "Web" server) over my home network (my router) so that I can load and use it for example on my smartphone. There's no need for it being accessible over the internet, I only want to use it at home when being connected to my WiFi.
Is that possible?
You can very simply build your own server using Node.js and Express.js.
Here is a simple snippet to create a server on port 8001 on your PC.
const express = require("express");
const app = express();
app.listen(8001, () => {
console.log("Listening on port 8001");
});
After that, you start building routes, middleware, and static files for your server. More info can be found here and here.
I currently use host winds to host a html/css/js files. I need to use Node for a new project aspect, and host winds says id have to use a virtual private server. so I figured ill use Heroku, since I have experience deploying to that environment already.
the heroku application has to execute a stripe operation:
(dummy data)
const stripe = require('stripe')('sk_test_NOFBwvYmIyZln2c64bv84A');
stripe.oauth.token({
grant_type: 'authorization_code',
code: 'ac_123456789',
}).then(function(response) {
// asynchronously called
var connected_account_id = response.stripe_user_id;
});
followed by a firebase firestore write operation
How can I connect to the heroku environment from a file hosted on Hostwinds? Is it as simple as creating an express server in the node.js heroku deployment, and calling a fetch POST/GET to an express endpoint from the web page thats hosted by host winds
Is it as simple as creating an express server in the node.js heroku deployment, and calling a fetch POST/GET to an express endpoint from the web page thats hosted by host winds
Exactly, call one of the routes in your app on heroku servers and then run your function from there.
I am trying to call the express root router ('/') from fetch api in react in production mode but it doesn't work.
I am using common server as I am using the react views as static files and renderning like this:
if(process.env.NODE_ENV == 'production'){
app.use(express.static(`${__dirname}/client/build`));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname+'/client/build/index.html'));
});
}
Also, i have already tried using the production hostname as the route in fetch but that doesn't work for me as I am using a proxy.
The complete story is that I am trying to get some tokens that I get from openshift oauth-proxy authentication. There are two containers, one for proxy and another for my web app. When the user is authenticated, proxy sends a token to 'localhost:8080' (which is my web app).
I am handling it this way,
app.get('/', function (req, res) {
if (req.headers !== undefined && req.headers['x-forwarded-access-token'] !== undefined && req.headers['x-forwarded-user'] != undefined) {
userDetails.accessToken = req.headers['x-forwarded-access-token'];
userDetails.username = req.headers['x-forwarded-user'];
req.session.token = userDetails.accessToken;
req.session.username = userDetails.username;
res.send({ accessToken: userDetails.accessToken, username: userDetails.username});
}
});
But when I call the above router from fetch api from react, i don't get the response. The app crashes.
When I am running it on development environment, I am running both on different servers, and when i write it completely, like 'fetch('http://localhost:3001')'
then it works.
I want it to work in production as well. Any help?
More details
The overall flow is, that I have deployed my react app on openshift. I am using oauth-proxy to authenticate the user and then land onto my react app once proxy sends me the authentication token in the react app.
There are two containers, proxy and web-app, inside the proxy-app pod. When i go to the route of the pod, it takes me to the keycloak login page where i enter my credentials, once authenticated, proxy send the auth-token in the headers to it's sidecar container which is my web-app (running on localhost:8080 inside the pod.) Proxy sends the headers to the localhost:8080/ (webapp) which is the root of the web app. Now here, i have to make a fetch request from client to this route and get the token(which i am not able to since it doesn't work this way probably because i am using a proxy which is running on different host than my web app). But when i make request on other routes like ('/api/xyz'), it works like charm. There is something with the root route and proxy that is creating the issue.
It worked when I added cors in my react code. I had it in my server code but not on react.
fetch('/auth', {
credentials: 'include',
mode: 'cors'
})
For security reasons, because of my workplace, I am having to define the ip address and port being used by a nodejs app that runs on the express framework using the process.argv property on the command line because my bosses do not want the ip address or ports saved in any of the source code.
I am able to extract the ip address and port on the server-side and store it in a global variable in my app.js file but now I need the value stored in those variables on my client-side so I can use those values in my view-controller files to run my route handlers requesting data with ajax from my server-side app.js file.
How can I access the value of a variable stored on the server-side from my client-side without using express routing and without having an ip address or a port number?
Is this even possible?
If it is possible, how then can I also pass those values using a script tag in my html governing the view of my application?
EDIT:
This is how I stored the code on my app.js server-side file:
// Mandatory field - This is the ipAddress of the machine where the CCDD Web Utility is hosted
ipAddress = process.argv[2];
console.log("Default ipAddress: " + ipAddress);