securing-web-applications-with-aws-elb-and-okta.html

<!DOCTYPE html>
<html lang="en">

  <head itemscope itemtype="http://schema.org/WebSite">
  <title>Securing Web Applications with AWS ALB Authentication and OKTA OIDC</title>
  <link href="http://gmpg.org/xfn/11" rel="profile">
  
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Authenticating AWS ELB with OKTA OIDC">
  <meta name="author" content="Shreyas MM" />
  <link rel="canonical" href="https://www.shreyasmm.com/securing-web-applications-with-aws-elb-and-okta">
  <link rel="alternate" type="application/rss+xml" title="Shreyas M M RSS Feed" href="https://www.shreyasmm.com/feed/"/>
  <link rel="manifest" href="manifest.json">
  
  <!-- Opengraph Tags-->
  <meta property="og:locale" content="en_US" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Shreyas MM" />
  <meta property="og:url" content="https://www.shreyasmm.com/securing-web-applications-with-aws-elb-and-okta" />
  <meta property="og:title" content="Securing Web Applications with AWS ALB Authentication and OKTA OIDC" />
  <meta property="og:description" content="Authenticating AWS ELB with OKTA OIDC" />

  <meta property="article:publisher" content="https://www.facebook.com/mmshreyas" />
  <meta property="article:author" content="https://www.facebook.com/mmshreyas" />
  <meta property="article:published_time" content="2019-04-08 05:02:06 +0000" />
  
  <!-- Twitter Tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@MMShreyas" />
  <meta name="twitter:creator" content="@MMShreyas" />
  <meta name="twitter:title" content="Securing Web Applications with AWS ALB Authentication and OKTA OIDC" />
  <meta name="twitter:description" content="Authenticating AWS ELB with OKTA OIDC" />
  
  <!-- Site verification -->
  <meta name="msvalidate.01" content="D73088A8361569DAFEC6811253CC8650" />
  <meta name="google-site-verification" content="he_TNo_sziGYbuzO0scYOvah35aCKTRPxs7EgC6zUbA" />
  <meta name="p:domain_verify" content="d8cf9bbeb8710ec2414c2aa169e8cc56" /> 

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-64993201-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-64993201-1');
  </script>

  <style type="text/css">
    
    /* 320px  */
/* 600px  */
/* 900px  */
/* 1200px */
/* 1800px */
/* 2400px */
@media screen and (min-width: 0) {
  head {
    font-family: "usn-small 0";
  }
  body:after {
    content: "usn-small - min-width: 0";
  }
}
@media screen and (min-width: 56.25em) {
  head {
    font-family: "usn-medium 56.25em";
  }
  body:after {
    content: "usn-medium - min-width: 56.25em";
  }
}
head {
  clear: both;
}
head title {
  font-family: "usn-small 0, usn-medium 56.25em";
}

body:after {
  display: none;
}

*[data-usn-if] {
  display: none;
}

/* 1.2   */
/* 1.44  */
/* 1.728 */
/* 2.074 */
/* 2.488 */
/* 2.986 */
/* 3.583 */
body {
  font-family: -apple-system, system, sans-serif;
  font-size: 1em;
  line-height: 1.728;
}

h3,
h2 {
  line-height: 1.2;
}

h1 {
  line-height: 1;
}

h6, .h6 {
  font-size: 0.8333333333em;
}

h5, .h5 {
  font-size: 1em;
}

h4, .h4 {
  font-size: 1.2em;
}

h3, .h3 {
  font-size: 1.44em;
}

h2, .h2 {
  font-size: 1.728em;
}

h1, .h1 {
  font-size: 2.0736em;
}

@media only screen and (min-width:56.313em) {
  body {
    font-size: 1em;
    font-size: calc( 1em + ( (1.2 - 1) / 1 ) * (100vw - 56.25rem) / (75 - 56.25) );
  }
}
@media only screen and (min-width:75.063em) {
  body {
    font-size: 1.44em;
    font-size: calc( 1.2em + ( (1.44 - 1.2) / 1.2 ) * (100vw - 75rem) / (112.5 - 75) );
  }
}
@media only screen and (min-width:112.563em) {
  body {
    font-size: 1.728em;
    font-size: calc( 1.44em + ( (2.0736 - 1.44) / 1.44 ) * (100vw - 112.5rem) / (150 - 112.5) );
  }
}
@media only screen and (min-width:150.063em) {
  body {
    font-size: 2.0736em;
    font-size: calc( 2.0736em + ( (2.48832 - 2.0736) / 2.0736 ) * (100vw - 150rem) / (200 - 150) );
  }
}
h1, .h1,
h2, .h2,
h3, .h3,
label, legend {
  font-family: -apple-system, system, sans-serif;
}

h1, .h1,
h2, .h2,
h3, .h3 {
  word-wrap: break-word;
  margin-top: 1em;
  margin-bottom: 0.5em;
}
h1 small,
h1 .small, .h1 small,
.h1 .small,
h2 small,
h2 .small, .h2 small,
.h2 .small,
h3 small,
h3 .small, .h3 small,
.h3 .small {
  font-size: 65%;
}

h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
h4 small,
h4 .small, .h4 small,
.h4 .small,
h5 small,
h5 .small, .h5 small,
.h5 .small,
h6 small,
h6 .small, .h6 small,
.h6 .small {
  font-size: 75%;
}

h1, h2, h3, h4, h5, h6 {
  color: currentColor;
}
h1, h1 a, h1 a:visited, h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited, h4, h4 a, h4 a:visited, h5, h5 a, h5 a:visited, h6, h6 a, h6 a:visited {
  color: currentColor;
  text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  text-decoration: underline;
}

p {
  margin: 0 0 0.5em;
}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

html,
body {
  box-sizing: border-box;
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

.img--no-max {
  max-width: none;
}

figure > img {
  display: block;
}

figcaption {
  font-size: 0.8333333333em;
}

a {
  text-decoration: underline;
  color: #000;
}
a:visited {
  color: #000;
}
a:hover {
  text-decoration: none;
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: none;
}

ul, ol {
  margin-bottom: 1em;
}
ul li, ol li {
  margin-bottom: 0.5rem;
}

.list-unstyled, .list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline > li {
  display: inline-block;
  margin: 0 -5px 0 0;
}

dl {
  margin-top: 0;
  margin-bottom: 1em;
}

dt,
dd {
  line-height: 1.44;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

blockquote,
blockquote p,
q {
  color: #495057;
}

blockquote {
  padding-left: 0.5em;
  font-size: 1.2em;
  letter-spacing: -1px;
  border-left: 4px solid #495057;
}
blockquote > :last-child {
  margin-bottom: 0;
}

blockquote cite {
  display: block;
  color: #212529;
}

blockquote cite:before {
  content: "— ";
}

blockquote cite a,
blockquote cite a:visited {
  color: #212529;
}

pre,
code {
  font-size: 15px;
  border: 1px solid #e9ecef;
  border-radius: 3px;
  background-color: #eef;
}

code {
  padding: 1px 5px;
}

pre {
  overflow-x: scroll;
  padding: 8px 12px;
}
pre > code {
  padding-right: 0;
  padding-left: 0;
  border: 0;
}

.page {
  padding-bottom: 4em;
}

.page, .wrapper {
  margin-right: auto;
  margin-left: auto;
  max-width: 100%;
}

.wrapper {
  padding-right: 1em;
  padding-left: 1em;
  max-width: 40em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
  grid-gap: 2vmin;
  margin-bottom: 1em;
}

/*! system-font.css v1.1.0 | CC0-1.0 License | github.com/jonathantneal/system-font-face */
@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
@font-face {
  font-family: system;
  font-style: italic;
  font-weight: 300;
  src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
}
@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 400;
  src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
}
@font-face {
  font-family: system;
  font-style: italic;
  font-weight: 400;
  src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma");
}
@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 500;
  src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold");
}
@font-face {
  font-family: system;
  font-style: italic;
  font-weight: 500;
  src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
}
@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 700;
  src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold");
}
@font-face {
  font-family: system;
  font-style: italic;
  font-weight: 700;
  src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
}
/* styling skip links */
.skip-links {
  position: absolute;
  top: 0;
  width: 100%;
}
.skip-links a {
  position: absolute;
  overflow: hidden;
  display: inline-block;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0.5em;
  background: black;
  color: white;
  text-decoration: none;
}
.skip-links a:focus {
  position: static;
  overflow: visible;
  clip: auto;
}

.site-header {
  position: relative;
  margin-bottom: 2em;
  padding: 0 1em;
  text-align: center;
  color: #fff;
  z-index: 0;
}

.site-header-top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 1em;
  width: 100%;
  background: transparent;
}
@media only screen and (min-width:56.313em) {
  .site-header-top {
    flex-direction: row;
  }
}

.site-header-hero {
  padding: 0;
  background-size: cover;
  background-position: center center;
  background: #495057;
  background-image: linear-gradient(to top, #495057 0%, #212529 100%);
}
.site-header-hero .wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40vmin;
}
.site-header-hero a {
  text-decoration: none;
  color: currentColor;
}
.site-header-hero a:visited {
  color: currentColor;
}
.site-header-hero::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
  opacity: 1;
  transition: opacity 1500ms ease-in-out;
}
.site-header.b-lazy::after {
  opacity: 1;
}

.site-header-background {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: opacity 200ms ease-in-out;
}

.site-title {
  display: block;
  margin: 0;
  font-size: 1.728em;
  line-height: 1;
  color: currentColor;
  text-decoration: none;
}

.site-title-hero {
  display: inline-block;
  padding: 0.5em;
  font-size: 2.0736em;
  font-weight: 300;
}

.site-title-link {
  color: currentColor;
  text-decoration: none;
}
.site-title-link, .site-title-link:visited {
  color: currentColor;
}

.site-information {
  margin: 0;
}

.site-slogan {
  text-align: center;
  color: #fff;
}

.exergue {
  margin-top: -2em;
  padding: 1em;
  width: 100%;
  text-align: center;
  color: #fff;
  background: #212529;
}
.exergue small {
  display: block;
  clear: both;
  width: 100%;
}
.exergue a {
  color: #fff;
}
.exergue a:hover {
  text-decoration: none;
}

nav ul {
  list-style: none;
}

@media only screen and (max-width:37.437em) {
  .nav-main {
    overflow-y: hidden !important;
    height: 40px !important;
    border-top: 1px solid;
    border-bottom: 1px solid;
  }
}
.nav-main ul {
  margin: 0;
  padding: 0.3em 0;
  min-width: 100%;
  list-style: none;
  text-align: center;
}
@media only screen and (max-width:37.437em) {
  .nav-main ul {
    display: block;
    white-space: nowrap;
    padding-bottom: 100px !important;
    overflow-y: hidden;
    overflow-x: auto;
  }
}
@media only screen and (min-width:56.313em) {
  .wrapper--flex .nav-main ul {
    text-align: right;
  }
}
.nav-main li {
  display: inline-block;
  text-align: center;
  margin: 0;
  padding: 0rem 0.5rem 0;
}
.nav-main a {
  font-weight: bold;
}
.nav-main a + .nav-main a {
  margin-left: 1em;
}
  </style>
  <script>
    /*
loadCSS: load a CSS file asynchronously.
[c]2015 @scottjehl, Filament Group, Inc.
Licensed MIT
*/
(function(w){
  "use strict";
  /* exported loadCSS */
  w.loadCSS = function( href, before, media ){
    // Arguments explained:
    // `href` [REQUIRED] is the URL for your CSS file.
    // `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
      // By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
    // `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
    var ss = w.document.createElement( "link" );
    var ref;
    if( before ){
      ref = before;
    }
    else if( w.document.querySelectorAll ){
      var refs = w.document.querySelectorAll(  "style,link[rel=stylesheet],script" );
      // No need to check length. This script has a parent element, at least
      ref = refs[ refs.length - 1];
    }
    else {
      ref = w.document.getElementsByTagName( "script" )[ 0 ];
    }

    var sheets = w.document.styleSheets;
    ss.rel = "stylesheet";
    ss.href = href;
    // temporarily set media to something inapplicable to ensure it'll fetch without blocking render
    ss.media = "only x";

    // Inject link
      // Note: the ternary preserves the existing behavior of "before" argument, but we could choose to change the argument to "after" in a later release and standardize on ref.nextSibling for all refs
      // Note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
    ref.parentNode.insertBefore( ss, ( before ? ref : ref.nextSibling ) );
    // A method (exposed on return object for external use) that mimics onload by polling until document.styleSheets until it includes the new sheet.
    ss.onloadcssdefined = function( cb ){
      var defined;
      for( var i = 0; i < sheets.length; i++ ){
        if( sheets[ i ].href && sheets[ i ].href === ss.href ){
          defined = true;
        }
      }
      if( defined ){
        cb();
      } else {
        setTimeout(function() {
          ss.onloadcssdefined( cb );
        });
      }
    };

    // once loaded, set link's media back to `all` so that the stylesheet applies once it loads
    ss.onloadcssdefined(function() {
      ss.media = media || "all";
    });
    return ss;
  };
}(this));

    loadCSS("/assets/css/main.css");
    !function(){"use strict";function e(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,n)}function t(e){return window.localStorage&&localStorage.font_css_cache&&localStorage.font_css_cache_file===e}function n(){if(window.localStorage&&window.XMLHttpRequest)if(t(o))c(localStorage.font_css_cache);else{var n=new XMLHttpRequest;n.open("GET",o,!0),e(n,"load",function(){4===n.readyState&&(c(n.responseText),localStorage.font_css_cache=n.responseText,localStorage.font_css_cache_file=o)}),n.send()}else{var a=document.createElement("link");a.href=o,a.rel="stylesheet",a.type="text/css",document.getElementsByTagName("head")[0].appendChild(a),document.cookie="font_css_cache";}}function c(e){var t=document.createElement("style");t.innerHTML=e,document.getElementsByTagName("head")[0].appendChild(t),document.getElementsByTagName("html")[0].className+=' font-loaded'}var o="/assets/css/font.css";window.localStorage&&localStorage.font_css_cache||document.cookie.indexOf("font_css_cache")>-1?n():e(window,"load",n)}();

  </script>
  <noscript><link rel="stylesheet" href="/assets/css/main.css"></noscript>
  <link rel="apple-touch-icon" sizes="57x57" href=/assets/favicons/apple-icon-57x57.png>
<link rel="apple-touch-icon" sizes="60x60" href=/assets/favicons/apple-icon-60x60.png>
<link rel="apple-touch-icon" sizes="72x72" href=/assets/favicons/apple-icon-72x72.png>
<link rel="apple-touch-icon" sizes="76x76" href=/assets/favicons/apple-icon-76x76.png>
<link rel="apple-touch-icon" sizes="114x114" href=/assets/favicons/apple-icon-114x114.png>
<link rel="apple-touch-icon" sizes="120x120" href=/assets/favicons/apple-icon-120x120.png>
<link rel="apple-touch-icon" sizes="144x144" href=/assets/favicons/apple-icon-144x144.png>
<link rel="apple-touch-icon" sizes="152x152" href=/assets/favicons/apple-icon-152x152.png>
<link rel="apple-touch-icon" sizes="180x180" href=/assets/favicons/apple-icon-180x180.png>
<link rel="icon" type="image/png" href=/assets/favicons/favicon-32x32.png>
<link rel="icon" type="image/png" href=/assets/favicons/android-chrome-192x192.png>
<link rel="icon" type="image/png" href=/assets/favicons/favicon-96x96.png>
<link rel="icon" type="image/png" href=/assets/favicons/favicon-16x16.png>
<link rel="manifest" href=/assets/favicons/manifest.json>
<link rel="shortcut icon" href=/assets/favicons/favicon.ico>
<meta name="msapplication-TileColor" content="#000">
<meta name="msapplication-TileImage" content="/assets/favicons/mstile-144x144.png" | relative_url }}>
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml" | relative_url }}>
<meta name="theme-color" content="#000">

</head>


  <body class="page" itemscope itemtype="http://schema.org/WebPage">

    <div class="skip-links">
  <a href="#main">Contenu principal</a>
</div>
<header class="site-header" role="banner">
  <div class="site-header-top wrapper">
      <div class="site-logo">
        <a class="site-title" href="/">Shreyas M M</a>
      </div>

      <nav class="nav-main" role="navigation">
        <ul>
          
            
            <li><a class="page-link" href="/about">About</a></li>
            
          
            <li><a class="page-link" href="/archives">Archives</a></li>
            
          
            <li><a class="page-link" href="/cheetsheet">Cheet Sheet</a></li>
            
          
            <li><a class="page-link" href="/publications">Publications</a></li>
            
          
        </ul>
      </nav>
  </div>

</header>


    <main id="main">
      <div class="wrapper">
  <article class="post">
    <h1 class="post-title">Securing Web Applications with AWS ALB Authentication and OKTA OIDC</h1>
    <p class="post-meta">08/04/2019</p>
    <p><img src="/assets/images/okta.jpg" alt="AWS ELB Authentication with OKTA" />
<strong>Contents</strong></p>
<ul>
  <li><a href="#introduction">Introduction</a></li>
  <li><a href="#assumptions">Assumptions</a></li>
  <li><a href="#configuring-okta">Configuring OKTA</a></li>
  <li><a href="#configuring-aws-application-load-balancer">Configuring AWS Application Load Balancer</a></li>
  <li><a href="#shortcomings">Shortcomings</a></li>
  <li><a href="#resources">Resources</a></li>
</ul>

<h2 id="introduction">Introduction</h2>

<p>AWS Elastic Load Balancer Service has introduced Builtin Authentication which supports any third party OIDC (<a href="https://openid.net/connect/">Open ID Connect</a>) Identity provider or <a href="https://aws.amazon.com/cognito/">AWS Cognito</a>.</p>

<p>Many organizations use centralized identity servers like <a href="https://www.okta.com">OKTA</a>, <a href="https://azure.microsoft.com/en-in/services/active-directory/">Azure Active Directory</a>, <a href="https://auth0.com/">Auth0</a>, and <a href="https://www.onelogin.com/">Onelogin</a> to secure there complete cloud solutions.</p>

<p>Now with this support we can use same OIDC identity providers with less effort to provide Authentication to Web Apps and Web Pages which are behind the AWS ALB (Applcation Loadbalancer). It also helps to take off the load of authentication of users form web application. In this article i will be showing how we can use AWS ALB builtin authentication with OKTA OIDC.</p>

<h2 id="assumptions">Assumptions</h2>

<p>OKTA Organization URL → <code class="language-plaintext highlighter-rouge">https://dev-267174.okta.com</code><br />
ALB Endpoint → <code class="language-plaintext highlighter-rouge">https://www.alb-okta-test.com</code><br />
Architecture<br />
<img src="/assets/images/okta1.jpg" alt="AWS OKTA Arch" /></p>

<h2 id="configuring-okta">Configuring OKTA</h2>

<p>Create a new OKTA Developer Account. We will be creating a new Client Application from Applications → Add Applications. Select the Application Platform as WEB
<img src="/assets/images/okta2.png" alt="AWS ELB Authentication with OKTA" /></p>

<p>Give Application label → Any Name<br />
Login redirect URIs → <code class="language-plaintext highlighter-rouge">https://www.alb-okta-test.com/oauth2/idpresponse</code><br />
Initiate login URI → <code class="language-plaintext highlighter-rouge">https://www.alb-okta-test.com</code><br />
Group assignments → Everyone or Any Specific Group<br />
Grant type allowed → Authorization Code only
Once Created Note down the Client Credentials → Client ID &amp; Client Secret</p>

<p><img src="/assets/images/okta3.png" alt="AWS ELB Authentication with OKTA" />
And in Assignments make sure you have atleast one User assigned to login.</p>

<p>Goto API → Authorization Servers, Get your Issuer URI from there.<br />
<img src="/assets/images/okta4.png" alt="AWS ELB Authentication with OKTA" /></p>

<p><strong>Now all your Endpoints will be</strong><br />
Issuer Endpoint → <code class="language-plaintext highlighter-rouge">https://dev-267174.okta.com/oauth2/default</code><br />
Authorization Endpoint → <code class="language-plaintext highlighter-rouge">https://dev-267174.okta.com/oauth2/default/v1/authorize</code><br />
Token Endpoint → <code class="language-plaintext highlighter-rouge">https://dev-267174.okta.com/oauth2/default/v1/token</code><br />
User Info Endpoint → <code class="language-plaintext highlighter-rouge">https://dev-267174.okta.com/oauth2/default/v1/userinfo</code><br />
Client ID &amp; Client Secret → Get from the OKTA Client Application.</p>

<h2 id="configuring-aws-application-load-balancer">Configuring AWS Application Load Balancer</h2>

<p>Assuming that Load Balancers, Target Groups and EC2 Instances have properly configured. Goto Amazon EC2 → Load Balancers → Select required ALB → Click on Listeners TAB → Select HTTPS → Click on Edit. You will be Redirected to Listener Pages
<img src="/assets/images/okta5.png" alt="AWS ELB Authentication with OKTA" />
Click on Add Action → Select Authenticate.<br />
<strong>Under Authenticate</strong><br />
Authenticate → OIDC<br />
Issuer Endpoint → <code class="language-plaintext highlighter-rouge">https://dev-267174.okta.com/oauth2/default</code><br />
Authorization Endpoint → <code class="language-plaintext highlighter-rouge">https://dev-267174.okta.com/oauth2/default/v1/authorize</code><br />
Token Endpoint → <code class="language-plaintext highlighter-rouge">https://dev-267174.okta.com/oauth2/default/v1/token</code><br />
User Info Endpoint → <code class="language-plaintext highlighter-rouge">https://dev-267174.okta.com/oauth2/default/v1/userinfo</code><br />
Client ID &amp; Client Secret → Get it from your OKTA Client Application.<br />
<img src="/assets/images/okta6.png" alt="AWS ELB Authentication with OKTA" />
<strong>Under Advanced Settings</strong><br />
Session cookie name → <code class="language-plaintext highlighter-rouge">AWSELBAuthSessionCookie</code><br />
Session timeout → <code class="language-plaintext highlighter-rouge">300</code><br />
Scope → <code class="language-plaintext highlighter-rouge">openid profile</code><br />
Action on unauthenticated request → <code class="language-plaintext highlighter-rouge">Authenticate (client reattempt)</code><br />
<img src="/assets/images/okta7.png" alt="AWS ELB Authentication with OKTA" />
Now Click Save or Update. Visit <code class="language-plaintext highlighter-rouge">https://www.alb-okta-test.com</code> or your Load Balancer URL which will be redirected to OKTA Sign in Page
<img src="/assets/images/okta8.png" alt="AWS ELB Authentication with OKTA" />
Once Logged in You will able to view the site and AWS ALB Session Cookie is Set.
<img src="/assets/images/okta9.png" alt="AWS ELB Authentication with OKTA" /></p>

<h2 id="shortcomings">Shortcomings</h2>

<p>When an application needs to log out an authenticated user, it should set the expiration time of the authentication session cookie (AWSELBAuthSessionCookie) to -1 and redirect the client to the IdP (OKTA ) logout endpoint which is</p>

<p><code class="language-plaintext highlighter-rouge">GET https://dev-267174.okta.com/oauth2/default/v1/logout?id_token_hint=${id_token}</code></p>

<p>Since we do not have the id_token to make this request because the id_token was give to AWS ALB, we cannot see this in browser also, AWS ALB internally gets the id_token and sets the session cookie.
One way to overcome this is set short session timeout like 300 seconds in loadbalancer configuration. <a href="https://docs.aws.amazon.com/elasticloadbalancing/latest/application/listener-authenticate-users.html#authentication-logout-timeout">Refer here</a></p>

<h2 id="resources">Resources</h2>

<ol>
  <li><a href="https://docs.aws.amazon.com/elasticloadbalancing/latest/application/listener-authenticate-users.html">https://docs.aws.amazon.com/elasticloadbalancing/latest/application/listener-authenticate-users.html</a></li>
  <li><a href="https://connect2id.com/learn/openid-connect">https://connect2id.com/learn/openid-connect</a></li>
  <li><a href="https://developer.okta.com/docs/api/resources/oidc">https://developer.okta.com/docs/api/resources/oidc</a></li>
</ol>

  </article>

  
<nav class="pagination--prevnext" role="navigation">

  
  <div class="pagination--prev">
    <a class="pagination--item" href="/tomcat-log-rotation-compression-encryption-gdpr-compliance-and-copy-to-aws-s3">
      Tomcat Log Rotation, Compression, Encryption (GDPR Compliance) and Copy to AWS S3
    </a>
  </div>
  

  <div class="pagination--next">
    <a class="pagination--item" href="/cost-cutting-strategies-for-developers">
      Cost-Cutting Strategies for Developers
    </a>
  </div>
  

</nav>


</div>

    </main>
    <!-- <script src=/assets/js/instantclick.min.js  data-no-instant></script>
    <script data-no-instant>
      InstantClick.init();
    </script> -->
    
<script type="text/javascript">
// Registration of service worker
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register("/sw.js").then(function(registration) {
            // Registration was successful
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
            // registration failed :(
            console.log('ServiceWorker registration failed: ', err);
        });
    });
}
else{
    console.log('Service Workers not supported');
}
</script>
  </body>
</html>