CODEWITHSUNDEEP
node.jsreactjsexpressauthenticationfirebase-authentication
itsame
itsame

Reputation: 181

Jump start on node.js express authentication with React SPA

I'm starting to build an application with a server in Express from Node.JS and front as an SPA in React.

I have a dashboard that only should be available for authenticated users. Also, there should be premium and non-premium users. Users should be able to login with Google etc. as well as using email + password.

I googled a bit around but I didn't find a clear answer... I think I understood how it would work if everything is server-rendered (with ejs or something) but I don't really understand how that would work with a React SPA. PassportJS seems like the standard to do this? The documentation is unfortunately very unstructured... also heard about JWTs, but as you can probably see, I don't really know a lot.

I would really appreciate a good summary or link to a tutorial (but I didn't find anything...)

Thanks in advance!

Upvotes: 1

Views: 1268

Answers (1)

Jonny Piazzi
Jonny Piazzi

Reputation: 3794

It's a lot to take in. Been there. If you doing a Server API with Web SPA, you need to break your research separately from these two.

Server side:

A good jump start is:
Node.js Server & Authentication Basics: Express, Sessions, Passport

I very, very short terms you need to create authentication and authorization. A popular way to make it happen in express it by using express middleware, as explained on tutorial above.

Client Side:

The main thing to keep in mind is, after you done your server side, each url should return a HTTP Status Code: 401 or 403 (maybe others) when:

401 Unauthorized

Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.

loose translation: You're are not logged-in.

403 Forbidden

The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. Unlike 401, the client's identity is known to the server.

loose translation: You are not allowed to see/do this stuff

So in your client you want to create a unified http api caller to handle those codes. This "unified caller" could vary drastically depending on what technologies you are using (Redux, MobX, Fetch API, ...).

I will leave you with a example using fetch and promise:

function globalFetch(url, data) {
  return new Promise((resolve, reject) => {
    fetch(url, data)
      .then(res => {
        if (res.status == 401) {
          // move SPA to login page here.
          reject();
        }

        if (res.status == 403) {
          // move SPA to "you are not allowed to see this stuff" page
          reject();
        }

        resolve(res);
      })
      .catch(erro => {
        // do stuff with the error, like log.
        // move spa to "That’s an error." page.
        reject();
      })
  });
}

and you use this function for all request in your SPA like:

globalFetch('/api/users/login', { method: 'POST', body: { ... } });

Upvotes: 1

Related Questions