Okta login using angular through Node - node.js

Question

I am creating a login strategy for my angular 6 web app. The user clicks the login button and it triggers an HTTP request to localhost:3000/login on my node server. I am using okta as an authenticator and using the passport oidc strategy. If I go to localhost:3000/login it performs the redirect as expected to the okta sign-in the portal. When I try it from my angular front end I get a CORS error. I have enabled Access-Control-Allow-Origin with a wildcard.
//app.js
require("dotenv").config();
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const routes = require("./routes/routes");
const mongoose = require("mongoose");
const casperRoutes = require("./routes/casper-routes");
const oktaRoutes = require("./routes/okta-routes");
const slackRoutes = require("./routes/slack-routes");
const session = require("express-session");
const passport = require("passport");
const OidcStrategy = require("passport-openidconnect").Strategy;
const oktaBaseAuth = process.env.OKTA_AUTH_URI;
mongoose
.connect(
"mongodb+srv://xxxxx",
{ useNewUrlParser: true }
)
.then(() => {
console.log("connected to database!");
})
.catch(() => {
console.log("connection failed");
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-requested-With, Content-Type, Accept"
);
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PATCH, PUT, DELETE, OPTIONS, PUT"
);
next();
});
app.use(
session({
secret: "xxx",
resave: false,
saveUninitialized: true
})
);
app.use(passport.initialize());
app.use(passport.session());
passport.use(
"oidc",
new OidcStrategy(
{
issuer: oktaBaseAuth + "/oauth2/default",
authorizationURL: oktaBaseAuth + "/oauth2/default/v1/authorize",
tokenURL: oktaBaseAuth + "/oauth2/default/v1/token",
userInfoURL: oktaBaseAuth + "/oauth2/default/v1/userinfo",
clientID: process.env.OKTA_AUTH_CLIENT_ID,
clientSecret: process.env.OKTA_AUTH_CLIENT_SECRET,
callbackURL: 'http://localhost:3000/authorization-code/callback',
scope: "openid profile"
},
(issuer, sub, profile, accessToken, refreshToken, done) => {
return done(null, profile);
}
)
);
passport.serializeUser((user,next)=>{
next(null,user);
});
passport.deserializeUser((obj,next)=>{
next(null,obj);
});
app.use('/login', passport.authenticate('oidc'));
app.use('/authorization-code/callback',
passport.authenticate('oidc', {failureRedirect: '/error'}),
(req,res)=>{
res.redirect('/');
});
function checkLogged(req,res,next){
if (req.isAuthenticated()){
return next();
}
res.redirect('/login');
}
app.use("/api/casper",checkLogged, casperRoutes);
app.use("/api/data",checkLogged, routes);
app.use("/api/okta", checkLogged,oktaRoutes);
app.use("/api/slack", checkLogged, slackRoutes);
module.exports = app;
The front end service
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { Subject, Observable } from "rxjs";
import * as OktaSignIn from "#okta/okta-signin-widget";
import { Injectable } from "#angular/core";
import { Router } from "#angular/router";
#Injectable({
providedIn: "root"
})
export class OktaService {
widget;
isAuthenticated = false;
user;
private headers = new HttpHeaders();
private authStatusListener = new Subject<boolean>();
constructor(private http: HttpClient, private router: Router) {}
loginUser(){
this.http.get('http://localhost:3000/login').subscribe(res=>console.log(res));
}
}
And the error
Failed to load https://dev-795809.oktapreview.com/oauth2/default/v1/authorize?response_type=code&client_id=0oag898j7zj7j8jqw0h7&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauthorization-code%2Fcallback&scope=openid%20openid%20profile&state=rtFMOtsHHBOc90UcM3nLIz%2Fp: Redirect from 'https://dev-795809.oktapreview.com/oauth2/default/v1/authorize?response_type=code&client_id=0oag898j7zj7j8jqw0h7&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauthorization-code%2Fcallback&scope=openid%20openid%20profile&state=rtFMOtsHHBOc90UcM3nLIz%2Fp' to 'https://dev-795809.oktapreview.com/login/login.htm?fromURI=/oauth2/v1/authorize/redirect?okta_key=c8hyLEuNV3KeYJyLfw2EU9xDjqsqeSOLft2jLzh-07E' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I've enabled CORS on my OKTA app as well. I read somewhere this may be because I cannot resolve CORS with a wildcard for authorization data. How can I connect to the backend for login using angular front-end running on a different port?

Answer 1

This happens because you're trying to make an XHR request to your backend. If you change it to redirect to your backend, it should work.
loginUser() {
window.location.href = 'http://localhost:3000/login'
}
The problem with this approach is that you'll likely be redirected back to your Node app after successfully logging in, rather than your Angular app. You could write custom code in your Node app to redirect back to the referrer after authentication. I've done this with Spring Security, but I'm not sure how to do it for Node.
Another option would be to use our Angular SDK and do the authentication in your Angular app, and set up your Node API as a resource server that simply validates the access token that's passed in.