Adding user authorization and authentication to React application via IBM app-id

Question

I have a basic frontend application that i would like to be able to let users sign up and login. The service ive decided to use for this is AppID by IBM. The flow of my application goes as such: frontend application (React) makes get/post requests to a node server via axios. The server then retrieves the data from a mongo database. I would like the user to click the login button on the react app, which would then redirect them to a login form on AppID and once authenticated, the user is redirected to another page which was previously protected because they were unauthorized.

The docs on IBM's website show an example of them protecting a node application where the frontend is also on the node application. These are the docs: https://cloud.ibm.com/docs/services/appid?topic=appid-web-apps#web-apps

const mongoose = require("mongoose");
const express = require("express");
let cors = require("cors");
const bodyParser = require("body-parser");
const logger = require("morgan");

const API_PORT = 5100;
const app = express();
app.use(cors());

//bodyParser, parses the request body to be a readable json format.
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(logger("dev"));

app.use(
  session({
    secret: "xxxxx",
    resave: true,
    saveUninitialized: true
  })
);

app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser((user, cb) => cb(null, user));
passport.deserializeUser((user, cb) => cb(null, user));

passport.use(
  new WebAppStrategy({
    clientId: "ca5d4ajsnfjsandew-e-f-w-rg--94e1681c6821",
    tenantId: "61982sedfysehfnscd-sfvs-dsf-sfds-464c7fbc",
    secret: "MmY3ZDJhNGQtfshbdfksndlsdjfjsbjdfjsdjhfbskYWRj",
    name: "TEA-web-app",
    oAuthServerUrl:
      "https://us-south.appid.cloud.ibm.com/oauth/v4/619820bahfbsef2-5931-4748-ba39-1cc4fsd464c7fbc",
    profilesUrl: "https://us-south.appid.cloud.ibm.com",
    discoveryEndpoint:
      "https://us-south.appid.cloud.ibmdds.com/oauth/v4/619820b2-5931ffd-4748-ba39-1cc4464c7fbc/.well-known/openid-configuration",
    redirectUri: "http://localhost:3000/dashboard"
  })
);

app.use(passport.authenticate(WebAppStrategy.STRATEGY_NAME));

//link to mongoDB database
const dbRoute =
  "mongodb+srv://username:password@cluster0-zjqhi.mongodb.net/TEA?retryWrites=true&w=majority";

//connect backend with mongoose database.
mongoose.connect(dbRoute, { useNewUrlParser: true });

let db = mongoose.connection;

//Prompt when connected to database.
db.once("open", () => console.log("connection with database made"));

//check if connection made was successful.
db.on("error", console.error.bind(console, "MongoDB connection error: "));

const userRouter = require("./routes/users");
const dataRouter = require("./routes/data");

app.use("/users", userRouter);
app.use("/data", dataRouter);

// launch our backend into a port
app.listen(API_PORT, () => console.log(`LISTENING ON PORT ${API_PORT}`));

This is the server side code that i have written, im not sure if i should be doing this on server side or if i should be writing code for authentication on my React application. Is it possible to do it on the frontend?

score 3 · Answer 1 · answered Aug 13 '19 at 19:39

Yes, so you'd have your backend talk to App ID and that would obtain the tokens. Once you have the tokens you can implement a cookie+session based approach to maintain some session between the frontend and your backend.

For more information, take a look at this blog post : https://www.ibm.com/cloud/blog/securing-angularnode-js-applications-using-app-id. That blog in particular has a sample that works with an Angular frontend and a Node backend and implements the cookie+session approach. But, the same principles apply for React as well.

Sample Code for blog : https://github.com/ibm-cloud-security/appid-sample-code-snippets/tree/master/angular-node-sample

Important Note : I noticed in your code snippet you have the App ID secret posted here in plain text. I'd highly recommend you delete those credentials and obtain a new pair from App ID. Anybody now who has your clientId and secret can impersonate your application.

Adding user authorization and authentication to React application via IBM app-id

1 Answers1