title: Adding user authorization and authentication to React application via IBM app-id
body: <p>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. </p>
  
  <p>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: <a href="https://cloud.ibm.com/docs/services/appid?topic=appid-web-apps#web-apps" rel="nofollow noreferrer">https://cloud.ibm.com/docs/services/appid?topic=appid-web-apps#web-apps</a></p>
  
  <pre><code>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) =&gt; cb(null, user));
  passport.deserializeUser((user, cb) =&gt; 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&amp;w=majority";
  
  //connect backend with mongoose database.
  mongoose.connect(dbRoute, { useNewUrlParser: true });
  
  let db = mongoose.connection;
  
  //Prompt when connected to database.
  db.once("open", () =&gt; 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, () =&gt; console.log(`LISTENING ON PORT ${API_PORT}`));
  
  </code></pre>
  
  <p>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?</p>