How to redirect the browser from server side after firebase authenticates user

Question

I have a node.js and express.js app hosted on firebase. It is hosted at : https://spice-ai.firebaseapp.com/

I would like to redirect to a different page after user authentication. However, res.redirect('/user') only redirects on app.get, not app.post. This is very strange, could someone tell me why?

My index.ts

import * as express   from 'express'           ;
import * as admin     from 'firebase-admin'    ;
import * as functions from 'firebase-functions';
import * as path      from "path"              ;
import * as math      from 'mathjs'            ;


import { Option, some, none } from 'fp-ts/lib/Option';

import * as bodyParser            from "body-parser";
import { body, validationResult } from 'express-validator/check';
import { sanitizeBody }           from 'express-validator/filter';


const accountKeyPath = path.join(__dirname, '../credentials/serviceAccountKey.json');
const accountKey     = require(accountKeyPath);

const adminSDKPath   = path.join(__dirname, '../credentials/spice-ai-firebase-adminsdk.json');
const adminSDK       = require(adminSDKPath);

const firebaseAdmin = admin.initializeApp({
      credential : admin.credential.cert(adminSDK)
    , databaseURL: accountKey['databaseURL']
});

const dbRef = new Proposal(firebaseAdmin, 'datasets');
const auth  = firebaseAdmin.auth()


// create HTTP server
const app = express();


// use json form parser middleware
app.use(bodyParser.json());

// use query string parser middlware
app.use(bodyParser.urlencoded({ extended: true }));

// set view engine
app.set('views', path.join(__dirname, '../src/view'))
app.set('view engine', 'pug');

// set static file source
app.use(express.static(path.join(__dirname, "../public")));

app.use(cors({origin: 'http://localhost:5000'}));
app.use(cors({origin: '/'}    ));
app.use(cors({origin: '/user'}));



app.get('/', (req,res) => {

    res.render('pages/login', {})
    // a res.redirect('/user') redirects immediately here

});


app.post('/', (req, res) => {

    // this does not redirect
    console.log('\n+++++++++++++++++++++++++++ POST')
    res.redirect('/user');

})

app.get('/user' , (req, res) => {

    console.log('\n############################### GET /user')
    res.render('pages/user')
});

exports.app = functions.https.onRequest(app);

The corresponding app.js on the front-end that post a json:

const config = {
    "apiKey"           : ""
    "authDomain"       : ""
    "databaseURL"      : ""
    "projectId"        : ""
    "storageBucket"    : ""
    "messagingSenderId": ""
};


firebase.initializeApp(config);
const auth = firebase.auth(); 

auth.onAuthStateChanged(user => {

    if (user) {

        console.log("loaded page with user: ", user['email'])
        user.getIdToken(true)

        .then( idToken => {

            console.log('user token: ', idToken)
            post_utoken(idToken);

        })

    } else {

        console.log('no user found')

    }
});


/**
    @Use: send user id to server
*/
function post_utoken(tok){

    var data = {};
    data.userToken = tok

    $.ajax({
          type        : 'POST'
        , url         : 'http://localhost:5000/'
        , data        : data
        , dataType    : 'json'

        , success : function(data) {

            console.log('\n======================================')
            console.log('success sending data from app.js')

        }
    })
}

Everything is pretty standard. Furthermore, on my bash I can see that the redirect and app.get('/user' ..) has both fired, since I have:

++++++++++++++++++++++++++ POST
info: Execution took 1 ms, user function completed successfully
127.0.0.1 - - [31/May/2018:22:03:28 +0000] "POST / HTTP/1.1" 302 27 "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36"
[hosting] Rewriting /user to local function app
info: User function triggered, starting execution
info: 
############################### GET /user
info: Execution took 78 ms, user function completed successfully
127.0.0.1 - - [31/May/2018:22:03:28 +0000] "GET /user HTTP/1.1" 200 6547 "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36"

However on the client side I am still at localhost:5000 even though app.get('/user'...) has fired.

===============================================================

EDIT:

I see that there is a conceptual misunderstanding about what ajax is doing when posting to the server. I would like to concentrate all app state on the server side, so I would like to redirect to /user within app.get('/' ..) callback if possible. So that means no ajax on the client end, if so how would I send information to the server side? Could I do it with socket.io or is it over engineering it? If so how would I do it?

Again, It's imperative that I redirect from the server side because I'm using index.ts as my app controller, so I do not want state change logic on the client side at all, except user authentification because of firebase constraints.

i mean... did you expect a server-side redirect to redirect the page after performing an ajax request? or... what. because, it won't. — Kevin B, May 31 '18 at 22:24
@KevinB yes If I put the code snippet `res.redirect('/user')` in the response to `app.get('/' (req, res) => ...)` then it redirects as expected. How should I redirect after `app.post` ? — xiaolingxiao, May 31 '18 at 22:26
With javascript. the get request redirects because you made it without ajax. Redirected ajax requests DO NOT redirect the browser. — Kevin B, May 31 '18 at 22:27

Jaime Gómez · Accepted Answer · 2018-05-31T23:21:12.360

Your expectations are slightly off.

When the server responds with the HTTP Status Code 302, it tells the browser where to go next, which makes sense when navigating with a GET request, not so much when posting data through ajax, where you have full control over what happens next.

It's actually easier, try something like this:

success : function(data) {
    window.location.href = '/user'
}

Which is exactly what you expect, done client-side.

If you really really need it to be done server-side, then add an html form and submit it via javascript, that way the browser will handle the request and take the appropriate action.

Add this to your HTML:

<form id="userform" action="/" method="POST" style="display: none">
    <input id="userform_email" name="email" value="">
</form>

And then in your script:

auth.onAuthStateChanged(user => {
    if (user) {
        document.getElementById('userform_email').value = user['email'];
        document.getElementById('userform').submit();
    } else {
        console.log('no user found')
    }
});

What you're doing is creating an invisible form that gets submitted once Firebase does its thing. The data will arrive in a different form to the server so you might need some adjustments there.

So the Ajax call is temporarily yielding control to the server? And awaits a response before finishing the computation? Is there a way to post to the server without Ajax, so I can redirect on the server side? This way I don’t have app state logic Spread out over the code base — xiaolingxiao, May 31 '18 at 22:56
Gomez do you mean form in an html? I'm working within the constraints of firebase here unfortunately, and so far as I know there is no way to listen to authentification state change from the server side, only the client side. So I have to listen on client side and insert a call to the server within the `auth.onAuthStateChanged` callback ... — xiaolingxiao, May 31 '18 at 23:16

How to redirect the browser from server side after firebase authenticates user

1 Answers1