diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json
new file mode 100644
index 00000000..f8b48885
--- /dev/null
+++ b/.vs/ProjectSettings.json
@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}
\ No newline at end of file
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
new file mode 100644
index 00000000..9d64503a
--- /dev/null
+++ b/.vs/VSWorkspaceState.json
@@ -0,0 +1,10 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\src",
+    "\\src\\Header",
+    "\\src\\Header\\Account"
+  ],
+  "SelectedNode": "\\src\\Header\\Account\\Account.jsx",
+  "PreviewInSolutionExplorer": false
+}
\ No newline at end of file
diff --git a/.vs/global-nav/v16/.suo b/.vs/global-nav/v16/.suo
new file mode 100644
index 00000000..5593a695
Binary files /dev/null and b/.vs/global-nav/v16/.suo differ
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
new file mode 100644
index 00000000..1b8d1409
Binary files /dev/null and b/.vs/slnx.sqlite differ
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e837b962..54bb5c99 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,5 @@
 {
-	"editor.formatOnSave": true,
-	"editor.rulers": [80],
+	"editor.rulers": [],
 	"files.eol": "\n",
 	"sasslint.enable": false,
 	"css.validate": false,
@@ -19,4 +18,4 @@
 		"dist": true,
 		"lib": true
 	}
-}
+}
\ No newline at end of file
diff --git a/auth_config.json b/auth_config.json
new file mode 100644
index 00000000..28155362
--- /dev/null
+++ b/auth_config.json
@@ -0,0 +1,4 @@
+{
+  "domain": "dev-identity.nice.org.uk",
+  "clientId": "14x3y8clvgQZTVSuPJzMAibOxr5qyHvM"
+}
\ No newline at end of file
diff --git a/examples/body-html/identity-inline.body.html b/examples/body-html/identity-inline.body.html
new file mode 100644
index 00000000..e8863f95
--- /dev/null
+++ b/examples/body-html/identity-inline.body.html
@@ -0,0 +1,154 @@
+<link href="//fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet" type="text/css" />
+<link href="//cdn.nice.org.uk/niceorg/css/app.min.css" rel="stylesheet" type="text/css" />
+<header class="container  ">
+	<div class="zone zone-breadcrumb">
+
+			<div class="widget-breadcrumb widget-html-widget widget">
+					<div class="widget-content">
+							<div class="hero">
+									<div class="hero__container">
+											<nav aria-label="Breadcrumbs">
+													<ol class="breadcrumbs" itemscope="" itemtype="http://schema.org/BreadcrumbList">
+															<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="https://www.nice.org.uk/" itemprop="name"> Home </a></li>
+															<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><span itemprop="name"> NICE guidance </span></li>
+													</ol>
+											</nav>
+											<div class="hero__body">
+													<div class="hero__copy">
+															<h1 id="content-start" class="hero__title">NICE guidance</h1>
+															<p class="hero__intro">Evidence-based recommendations developed by independent committees, including professionals and lay members, and consulted on&nbsp;by&nbsp;stakeholders.</p>
+															<div class="hero__actions"><a href="/guidance/published?type=apg,csg,cg,mpg,ph,sg,sc,dg,hst,ipg,mtg,qs,ta" class="btn btn--cta">View all guidance</a></div>
+													</div>
+													<div class="hero__extra">
+															<h2 class="h3 mt--0-md">Popular in guidance</h2>
+															<ul class="list--unstyled list--loose">
+																	<li><a href="/guidance/conditions-and-diseases">Conditions and diseases topic&nbsp;pages</a></li>
+																	<li><a href="/guidance/lifestyle-and-wellbeing">Lifestyle and wellbeing topic&nbsp;pages</a></li>
+																	<li><a href="/guidance/lifestyle-and-wellbeing">NICE guidelines</a></li>
+																	<li><a href="/guidance/published?type=cg">Clinical guidelines</a></li>
+															</ul>
+													</div>
+											</div>
+											<section class="hero__footer" aria-labelledby="new-updated">
+													<h2 class="h5 mv--0 show--ib mr--d" id="new-updated">New&nbsp;and updated products:</h2>
+													<ul class="list list--piped show--ib">
+															<li><a href="/guidance/date"><span class="visually-hidden">New and updated products </span><span class="text-uppercase">t</span>his month</a></li>
+															<li><a href="/guidance/lastmonth"><span class="visually-hidden">New and updated products </span><span class="text-uppercase">l</span>ast month</a></li>
+															<li><a href="/guidance/last6months"><span class="visually-hidden">New and updated products in the </span><span class="text-uppercase">l</span>ast 6 months</a></li>
+													</ul>
+											</section>
+									</div>
+							</div>
+					</div>
+			</div>
+	</div>
+</header>
+<div id="toTop"><i aria-hidden="true" class="icon-nice-chevron-up"></i></div>
+<div class="layout ">
+	<div class="">
+			<div class="zone zone-content">
+					<div class="page-content corporate-content">
+							<div>
+									<main class="grid grid--loose">
+											<div data-g="12 md:4">
+													<div class="panel mt--0 mb--0-md">
+															<section aria-labelledby="topics">
+																	<h2 id="topics" class="mt--0">Browse by topic</h2>
+																	<p>Topic pages bring together products on the same subject, for example <a href="/guidance/conditions-and-diseases/diabetes-and-other-endocrinal--nutritional-and-metabolic-conditions/diabetes">diabetes</a>, <a href="/guidance/lifestyle-and-wellbeing/mental-health-and-wellbeing">mental health and wellbeing</a> or <a href="/guidance/population-groups/children-and-young-people">children and young&nbsp;people</a>.</p>
+																	<h3>Find a topic page by</h3>
+																	<ul class="list list--unstyled list--loose">
+																			<li><a href="/guidance/conditions-and-diseases">Conditions and diseases</a></li>
+																			<li><a href="/guidance/health-protection">Health protection</a></li>
+																			<li><a href="/guidance/lifestyle-and-wellbeing">Lifestyle and wellbeing</a></li>
+																			<li><a href="/guidance/population-groups">Population groups</a></li>
+																			<li><a href="/guidance/service-delivery--organisation-and-staffing">Service delivery, organisation and&nbsp;staffing</a></li>
+																			<li><a href="/guidance/settings">Settings</a></li>
+																	</ul>
+															</section>
+															<hr />
+															<section aria-labelledby="pathways">
+																	<h2 id="pathways">NICE Pathways</h2>
+																	<p>Integrated view of all NICE guidance and advice in topic based interactive&nbsp;flowcharts.</p>
+																	<p><a href="https://pathways.nice.org.uk/" class="show"> View all NICE Pathways <img src="https://www.nice.org.uk/Media/Default/images/topic-pages/pathways-example.png" alt="" class="show" /> </a></p>
+															</section>
+													</div>
+											</div>
+											<div data-g="12 md:8">
+													<section aria-labelledby="guidance-programmes">
+															<h2 id="guidance-programmes" class="mt--0">Guidance by programme</h2>
+															<ul class="grid">
+																	<li data-g="12 sm:6">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=apg,csg,cg,mpg,ph,sg,sc"> NICE guidelines </a></h3>
+																			<p class="mt--0">Review the evidence across broad health and social care topics. Includes <a href="/guidance/published?type=cg">clinical&nbsp;guidelines</a>.</p>
+																	</li>
+																	<li data-g="12 sm:6">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=ta"> Technology appraisal guidance </a></h3>
+																			<p class="mt--0">Review clinical and cost effectiveness of new&nbsp;treatments.</p>
+																	</li>
+																	<li data-g="12 sm:6">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=dg"> Diagnostics guidance </a></h3>
+																			<p class="mt--0">Review new diagnostic technologies for adoption in the&nbsp;NHS.</p>
+																	</li>
+																	<li data-g="12 sm:6" class="mb--c">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=hst"> Highly specialised technologies guidance </a></h3>
+																			<p class="mt--0">Review clinical and cost effectiveness of specialised&nbsp;treatments.</p>
+																	</li>
+																	<li data-g="12 sm:6" class="mb--c">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=ipg"> Interventional procedures guidance </a></h3>
+																			<p class="mt--0"><span>Review the efficacy and safety of&nbsp;procedures</span></p>
+																	</li>
+																	<li data-g="12 sm:6" class="mb--c">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=mtg"> Medical technologies guidance </a></h3>
+																			<p class="mt--0">Review new medical devices for adoption in the&nbsp;NHS.</p>
+																	</li>
+															</ul>
+													</section>
+													<section aria-labelledby="in-development-updated">
+															<h2 id="in-development-updated" class="mt--0">Products being developed or&nbsp;updated</h2>
+															<ul class="grid">
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/inconsultation"> In consultation </a></h3>
+																			<p class="mt--0">Guidance and quality standards open for&nbsp;consultation.</p>
+																	</li>
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/indevelopment"> In development </a></h3>
+																			<p class="mt--0">Guidance, quality standards and advice being&nbsp;developed.</p>
+																	</li>
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/proposed"> Proposed </a></h3>
+																			<p class="mt--0"><span>Guidance and quality standards that have been proposed for development.</span></p>
+																	</li>
+															</ul>
+													</section>
+													<hr class="mt--d" />
+													<h2>We also produce:</h2>
+													<section aria-labelledby="quality-standards">
+															<h3 id="quality-standards" class="mt--0"><a href="/guidance/published?type=qs">Quality standards</a></h3>
+															<p>Set out priority areas for quality improvement in health and social care.</p>
+													</section>
+													<section aria-labelledby="advice">
+															<h3 id="advice" class="mt--0"><a href="/guidance/published?type=esmpb,esnm,esuom,ktt,lgb,mib">Advice</a></h3>
+															<p>A range of products that critically assess and summarise the latest evidence.</p>
+															<ul class="grid">
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=es"> Evidence summaries </a></h3>
+																			<p class="mt--0">Review the best available evidence for selected medicines. Includes <a href="/guidance/published?type=apa">antimicrobial&nbsp;prescribing</a>.</p>
+																	</li>
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=mib"> Medtech innovation briefings </a></h3>
+																			<p class="mt--0">Review the evidence and likely costs of medical devices and&nbsp;technologies.</p>
+																	</li>
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=ktt"> Key therapeutic topics </a></h3>
+																			<p class="mt--0">Evidence summaries to support medicines&nbsp;optimisation.</p>
+																	</li>
+															</ul>
+													</section>
+											</div>
+									</main>
+							</div>
+
+					</div>
+			</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/examples/body-html/identity-popup.body.html b/examples/body-html/identity-popup.body.html
new file mode 100644
index 00000000..d116a281
--- /dev/null
+++ b/examples/body-html/identity-popup.body.html
@@ -0,0 +1,199 @@
+<link href="//fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet" type="text/css" />
+<link href="//cdn.nice.org.uk/niceorg/css/app.min.css" rel="stylesheet" type="text/css" />
+
+<script src="https://www.nice.org.uk/Themes/NICE.Bootstrap/scripts/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
+<script src="https://www.nice.org.uk/Themes/NICE.Bootstrap/scripts/head.combined-v1.10.7695.0.js" type="text/javascript"></script>
+
+
+
+<header class="container  ">
+	<div class="zone zone-breadcrumb">
+
+			<div class="widget-breadcrumb widget-html-widget widget">
+					<div class="widget-content">
+							<div class="hero">
+									<div class="hero__container">
+											<nav aria-label="Breadcrumbs">
+													<ol class="breadcrumbs" itemscope="" itemtype="http://schema.org/BreadcrumbList">
+															<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="https://www.nice.org.uk/" itemprop="name"> Home </a></li>
+															<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><span itemprop="name"> NICE guidance </span></li>
+													</ol>
+											</nav>
+											<div class="hero__body">
+													<div class="hero__copy">
+															<h1 id="content-start" class="hero__title">NICE guidance</h1>
+															<p class="hero__intro">Evidence-based recommendations developed by independent committees, including professionals and lay members, and consulted on&nbsp;by&nbsp;stakeholders.</p>
+															<div class="hero__actions"><a href="/guidance/published?type=apg,csg,cg,mpg,ph,sg,sc,dg,hst,ipg,mtg,qs,ta" class="btn btn--cta">View all guidance</a></div>
+													</div>
+													<div class="hero__extra">
+															<h2 class="h3 mt--0-md">Popular in guidance</h2>
+															<ul class="list--unstyled list--loose">
+																	<li><a href="/guidance/conditions-and-diseases">Conditions and diseases topic&nbsp;pages</a></li>
+																	<li><a href="/guidance/lifestyle-and-wellbeing">Lifestyle and wellbeing topic&nbsp;pages</a></li>
+																	<li><a href="/guidance/lifestyle-and-wellbeing">NICE guidelines</a></li>
+																	<li><a href="/guidance/published?type=cg">Clinical guidelines</a></li>
+															</ul>
+													</div>
+											</div>
+											<section class="hero__footer" aria-labelledby="new-updated">
+													<h2 class="h5 mv--0 show--ib mr--d" id="new-updated">New&nbsp;and updated products:</h2>
+													<ul class="list list--piped show--ib">
+															<li><a href="/guidance/date"><span class="visually-hidden">New and updated products </span><span class="text-uppercase">t</span>his month</a></li>
+															<li><a href="/guidance/lastmonth"><span class="visually-hidden">New and updated products </span><span class="text-uppercase">l</span>ast month</a></li>
+															<li><a href="/guidance/last6months"><span class="visually-hidden">New and updated products in the </span><span class="text-uppercase">l</span>ast 6 months</a></li>
+													</ul>
+											</section>
+									</div>
+							</div>
+					</div>
+			</div>
+	</div>
+</header>
+<div id="toTop"><i aria-hidden="true" class="icon-nice-chevron-up"></i></div>
+<div class="layout ">
+	<div class="">
+			<div class="zone zone-content">
+					<div class="page-content corporate-content">
+							<div>
+									<main class="grid grid--loose">
+											<div data-g="12 md:4">
+													<div class="panel mt--0 mb--0-md">
+															<section aria-labelledby="topics">
+																	<h2 id="topics" class="mt--0">Browse by topic</h2>
+																	<p>Topic pages bring together products on the same subject, for example <a href="/guidance/conditions-and-diseases/diabetes-and-other-endocrinal--nutritional-and-metabolic-conditions/diabetes">diabetes</a>, <a href="/guidance/lifestyle-and-wellbeing/mental-health-and-wellbeing">mental health and wellbeing</a> or <a href="/guidance/population-groups/children-and-young-people">children and young&nbsp;people</a>.</p>
+																	<h3>Find a topic page by</h3>
+																	<ul class="list list--unstyled list--loose">
+																			<li><a href="/guidance/conditions-and-diseases">Conditions and diseases</a></li>
+																			<li><a href="/guidance/health-protection">Health protection</a></li>
+																			<li><a href="/guidance/lifestyle-and-wellbeing">Lifestyle and wellbeing</a></li>
+																			<li><a href="/guidance/population-groups">Population groups</a></li>
+																			<li><a href="/guidance/service-delivery--organisation-and-staffing">Service delivery, organisation and&nbsp;staffing</a></li>
+																			<li><a href="/guidance/settings">Settings</a></li>
+																	</ul>
+															</section>
+															<hr />
+															<section aria-labelledby="pathways">
+																	<h2 id="pathways">NICE Pathways</h2>
+																	<p>Integrated view of all NICE guidance and advice in topic based interactive&nbsp;flowcharts.</p>
+																	<p><a href="https://pathways.nice.org.uk/" class="show"> View all NICE Pathways <img src="https://www.nice.org.uk/Media/Default/images/topic-pages/pathways-example.png" alt="" class="show" /> </a></p>
+															</section>
+													</div>
+											</div>
+											<div data-g="12 md:8">
+													<section aria-labelledby="guidance-programmes">
+															<h2 id="guidance-programmes" class="mt--0">Guidance by programme</h2>
+															<ul class="grid">
+																	<li data-g="12 sm:6">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=apg,csg,cg,mpg,ph,sg,sc"> NICE guidelines </a></h3>
+																			<p class="mt--0">Review the evidence across broad health and social care topics. Includes <a href="/guidance/published?type=cg">clinical&nbsp;guidelines</a>.</p>
+																	</li>
+																	<li data-g="12 sm:6">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=ta"> Technology appraisal guidance </a></h3>
+																			<p class="mt--0">Review clinical and cost effectiveness of new&nbsp;treatments.</p>
+																	</li>
+																	<li data-g="12 sm:6">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=dg"> Diagnostics guidance </a></h3>
+																			<p class="mt--0">Review new diagnostic technologies for adoption in the&nbsp;NHS.</p>
+																	</li>
+																	<li data-g="12 sm:6" class="mb--c">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=hst"> Highly specialised technologies guidance </a></h3>
+																			<p class="mt--0">Review clinical and cost effectiveness of specialised&nbsp;treatments.</p>
+																	</li>
+																	<li data-g="12 sm:6" class="mb--c">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=ipg"> Interventional procedures guidance </a></h3>
+																			<p class="mt--0"><span>Review the efficacy and safety of&nbsp;procedures</span></p>
+																	</li>
+																	<li data-g="12 sm:6" class="mb--c">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=mtg"> Medical technologies guidance </a></h3>
+																			<p class="mt--0">Review new medical devices for adoption in the&nbsp;NHS.</p>
+																	</li>
+															</ul>
+													</section>
+													<section aria-labelledby="in-development-updated">
+															<h2 id="in-development-updated" class="mt--0">Products being developed or&nbsp;updated</h2>
+															<ul class="grid">
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/inconsultation"> In consultation </a></h3>
+																			<p class="mt--0">Guidance and quality standards open for&nbsp;consultation.</p>
+																	</li>
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/indevelopment"> In development </a></h3>
+																			<p class="mt--0">Guidance, quality standards and advice being&nbsp;developed.</p>
+																	</li>
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/proposed"> Proposed </a></h3>
+																			<p class="mt--0"><span>Guidance and quality standards that have been proposed for development.</span></p>
+																	</li>
+															</ul>
+													</section>
+													<hr class="mt--d" />
+													<h2>We also produce:</h2>
+													<section aria-labelledby="quality-standards">
+															<h3 id="quality-standards" class="mt--0"><a href="/guidance/published?type=qs">Quality standards</a></h3>
+															<p>Set out priority areas for quality improvement in health and social care.</p>
+													</section>
+													<section aria-labelledby="advice">
+															<h3 id="advice" class="mt--0"><a href="/guidance/published?type=esmpb,esnm,esuom,ktt,lgb,mib">Advice</a></h3>
+															<p>A range of products that critically assess and summarise the latest evidence.</p>
+															<ul class="grid">
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=es"> Evidence summaries </a></h3>
+																			<p class="mt--0">Review the best available evidence for selected medicines. Includes <a href="/guidance/published?type=apa">antimicrobial&nbsp;prescribing</a>.</p>
+																	</li>
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=mib"> Medtech innovation briefings </a></h3>
+																			<p class="mt--0">Review the evidence and likely costs of medical devices and&nbsp;technologies.</p>
+																	</li>
+																	<li data-g="12 xs:6 sm:4">
+																			<h3 class="h5 mt--0 mb--c"><a href="/guidance/published?type=ktt"> Key therapeutic topics </a></h3>
+																			<p class="mt--0">Evidence summaries to support medicines&nbsp;optimisation.</p>
+																	</li>
+															</ul>
+													</section>
+											</div>
+									</main>
+							</div>
+
+					</div>
+			</div>
+	</div>
+</div>
+
+
+
+<script>// <![CDATA[
+var cpy = document.getElementsByClassName("legal-copyright")[0];
+if(cpy)
+	cpy.innerHTML = cpy.innerHTML.replace("[year]", new Date().getFullYear());
+// ]]></script>
+    </div>
+  </div></div>
+    <!--[if lt IE 9]>
+<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js" type="text/javascript"></script>
+<![endif]-->
+<script src="//cdn.nice.org.uk/V2/Scripts/twitter.bootstrap.min.js" type="text/javascript"></script>
+<script src="//cdn.nice.org.uk/V2/Scripts/NICE.bootstrap.min.js" type="text/javascript"></script>
+<script type="text/javascript"></script>
+<script src="https://www.nice.org.uk/Modules/Orchard.Resources/scripts/history.min.js" type="text/javascript"></script>
+<script src="//cdn.nice.org.uk/V3/Scripts/nice/NICE.EventTracking.js" type="text/javascript"></script>
+<script src="https://www.nice.org.uk/Themes/NICE.Bootstrap/scripts/niceorg/NICE.TopScroll.js" type="text/javascript"></script>
+<script src="https://www.nice.org.uk/Themes/NICE.Bootstrap/scripts/foot.combined-v1.10.7695.0.js" type="text/javascript"></script>
+
+
+<script type="text/javascript">
+		$(document).ajaxSend(function (event, jqxhr, settings) {
+				if (settings.url.indexOf("?") >= 0) {
+						settings.url = settings.url + "&ajax=ajax";
+				} else {
+						settings.url = settings.url + "?ajax=ajax";
+				}
+		})
+</script>
+<script type="text/javascript">
+		var is_touch_device = 'ontouchstart' in document.documentElement;
+		if (is_touch_device) {
+				$('body').addClass('touch-screen-device');
+		} else {
+				$('body').addClass('non-touch-screen-device');
+		}
+</script>
diff --git a/examples/examples.js b/examples/examples.js
index 53bfabc2..1359183f 100644
--- a/examples/examples.js
+++ b/examples/examples.js
@@ -204,6 +204,34 @@ const noAuthNoSearchConfig = {
 	}
 };
 
+const identityPopupConfig = {
+	filename: "identity-popup",
+	title: "Identity Popup signin",
+	global_nav_config: {
+		header: {
+			auth: {
+				provider: "idam",
+				mode: "popup"
+			},
+			search: false
+		}
+	}
+};
+
+const identityInlineConfig = {
+	filename: "identity-inline",
+	title: "Identity Inline signin",
+	global_nav_config: {
+		header: {
+			auth: {
+				provider: "idam",
+				mode: "inline"
+			},
+			search: false
+		}
+	}
+};
+
 module.exports = [
 	pathwaysConfig,
 	guidanceConfig,
@@ -216,5 +244,7 @@ module.exports = [
 	journalsConfig,
 	identityAdminLoggedOutConfig,
 	identityAdminLoggedInConfig,
-	noAuthNoSearchConfig
+	noAuthNoSearchConfig,
+	identityPopupConfig,
+	identityInlineConfig
 ];
diff --git a/package-lock.json b/package-lock.json
index e34ecaa8..6b67eff8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,26 @@
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
+		"@auth0/auth0-spa-js": {
+			"version": "1.6.3",
+			"resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-1.6.3.tgz",
+			"integrity": "sha512-jbK6qrcy3N8bAltP/sEdv9vo0eML9LneAESB05K/MPCwZVUJN9hu+y42DxfI7kH6dnVNyUbJohgpimv+eNonlQ==",
+			"requires": {
+				"browser-tabs-lock": "^1.2.1",
+				"core-js": "^3.2.1",
+				"es-cookie": "^1.2.0",
+				"fast-text-encoding": "^1.0.0",
+				"promise-polyfill": "^8.1.3",
+				"unfetch": "^4.1.0"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "3.6.4",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
+					"integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw=="
+				}
+			}
+		},
 		"@babel/cli": {
 			"version": "7.7.0",
 			"resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.7.0.tgz",
@@ -2188,8 +2208,7 @@
 		"asynckit": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-			"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-			"dev": true
+			"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
 		},
 		"atob": {
 			"version": "2.1.2",
@@ -2197,6 +2216,27 @@
 			"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
 			"dev": true
 		},
+		"auth0-js": {
+			"version": "9.12.2",
+			"resolved": "https://registry.npmjs.org/auth0-js/-/auth0-js-9.12.2.tgz",
+			"integrity": "sha512-0VfPu5UcgkGKQc7Q8KPqgkqqhLgXGsDCro2tde7hHPYK9JEzOyq82v0szUTHWlwQE1VT8K2/qZAsGDf7hFjI7g==",
+			"requires": {
+				"base64-js": "^1.3.0",
+				"idtoken-verifier": "^2.0.1",
+				"js-cookie": "^2.2.0",
+				"qs": "^6.7.0",
+				"superagent": "^3.8.3",
+				"url-join": "^4.0.1",
+				"winchan": "^0.2.2"
+			},
+			"dependencies": {
+				"qs": {
+					"version": "6.9.1",
+					"resolved": "https://registry.npmjs.org/qs/-/qs-6.9.1.tgz",
+					"integrity": "sha512-Cxm7/SS/y/Z3MHWSxXb8lIFqgqBowP5JMlTUFyJN88y0SGQhVmZnqFK/PeuMX9LzUyWsqqhNxIyg0jlzq946yA=="
+				}
+			}
+		},
 		"autoprefixer": {
 			"version": "9.7.2",
 			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.2.tgz",
@@ -2490,8 +2530,7 @@
 		"base64-js": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
-			"integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==",
-			"dev": true
+			"integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g=="
 		},
 		"batch": {
 			"version": "0.6.1",
@@ -2669,6 +2708,11 @@
 				}
 			}
 		},
+		"browser-tabs-lock": {
+			"version": "1.2.6",
+			"resolved": "https://registry.npmjs.org/browser-tabs-lock/-/browser-tabs-lock-1.2.6.tgz",
+			"integrity": "sha512-+FUo97nnOix/nQo+j4HyCO47bsJtfx1EFhj1rghqYx7N0MQ8D34aoP4eJGrMtN0D18s2OAGpbPqo/0ONGxDLiA=="
+		},
 		"browserify-aes": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
@@ -3283,7 +3327,6 @@
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
 			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-			"dev": true,
 			"requires": {
 				"delayed-stream": "~1.0.0"
 			}
@@ -3335,8 +3378,7 @@
 		"component-emitter": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
-			"integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
-			"dev": true
+			"integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
 		},
 		"compressible": {
 			"version": "2.0.17",
@@ -3440,6 +3482,11 @@
 			"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
 			"dev": true
 		},
+		"cookiejar": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.2.tgz",
+			"integrity": "sha512-Mw+adcfzPxcPeI+0WlvRrr/3lGVO0bD75SxX6811cxSh1Wbxx7xZBGK1eVtDf6si8rg2lhnUjsVLMFMfbRIuwA=="
+		},
 		"copy-concurrently": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -3707,8 +3754,7 @@
 		"core-util-is": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-			"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-			"dev": true
+			"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
 		},
 		"cosmiconfig": {
 			"version": "4.0.0",
@@ -3855,6 +3901,11 @@
 				"randomfill": "^1.0.3"
 			}
 		},
+		"crypto-js": {
+			"version": "3.1.9-1",
+			"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz",
+			"integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg="
+		},
 		"css-loader": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-2.1.1.tgz",
@@ -4203,8 +4254,7 @@
 		"delayed-stream": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-			"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-			"dev": true
+			"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
 		},
 		"delegates": {
 			"version": "1.0.0",
@@ -4665,6 +4715,11 @@
 				"object-keys": "^1.0.12"
 			}
 		},
+		"es-cookie": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/es-cookie/-/es-cookie-1.3.2.tgz",
+			"integrity": "sha512-UTlYYhXGLOy05P/vKVT2Ui7WtC7NiRzGtJyAKKn32g5Gvcjn7KAClLPWlipCtxIus934dFg9o9jXiBL0nP+t9Q=="
+		},
 		"es-to-primitive": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
@@ -4701,6 +4756,11 @@
 			"resolved": "https://registry.npmjs.org/es5-polyfill/-/es5-polyfill-0.0.6.tgz",
 			"integrity": "sha512-u6Een5n6esxwlMVBsF6qUkgp5Mj5VSA9D7Qs0GfC3ey412FGmQNFhjjuTMbzgepKZSHDKisr24A9t/GOwHC7/g=="
 		},
+		"es6-promise": {
+			"version": "4.2.8",
+			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+			"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+		},
 		"escape-html": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -5223,8 +5283,7 @@
 		"extend": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-			"dev": true
+			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
 		},
 		"extend-shallow": {
 			"version": "3.0.2",
@@ -5377,6 +5436,11 @@
 			"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
 			"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
 		},
+		"fast-text-encoding": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.0.tgz",
+			"integrity": "sha512-R9bHCvweUxxwkDwhjav5vxpFvdPGlVngtqmx4pIZfSUhM/Q4NiIUHB456BAf+Q1Nwu3HEZYONtu+Rya+af4jiQ=="
+		},
 		"faye-websocket": {
 			"version": "0.10.0",
 			"resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
@@ -5558,13 +5622,17 @@
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
 			"integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-			"dev": true,
 			"requires": {
 				"asynckit": "^0.4.0",
 				"combined-stream": "^1.0.6",
 				"mime-types": "^2.1.12"
 			}
 		},
+		"formidable": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.1.tgz",
+			"integrity": "sha512-Fs9VRguL0gqGHkXS5GQiMCr1VhZBxz0JnJs4JmMp/2jL18Fmbzvv7vOFRU+U8TBkHEE/CX1qDXzJplVULgsLeg=="
+		},
 		"forwarded": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -6880,6 +6948,26 @@
 				"harmony-reflect": "^1.4.6"
 			}
 		},
+		"idtoken-verifier": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/idtoken-verifier/-/idtoken-verifier-2.0.1.tgz",
+			"integrity": "sha512-sLLFPPc6D6Ske7JNHHrrWHbQKuY1OJN9GcJd6Y1LjMvInJBr26Axbo6o07JYPPTRUzJahBWHudabgFoNo23lMw==",
+			"requires": {
+				"base64-js": "^1.3.0",
+				"crypto-js": "^3.1.9-1",
+				"es6-promise": "^4.2.8",
+				"jsbn": "^1.1.0",
+				"unfetch": "^4.1.0",
+				"url-join": "^4.0.1"
+			},
+			"dependencies": {
+				"jsbn": {
+					"version": "1.1.0",
+					"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
+					"integrity": "sha1-sBMHyym2GKHtJux56RH4A8TaAEA="
+				}
+			}
+		},
 		"ieee754": {
 			"version": "1.1.13",
 			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@@ -6996,8 +7084,7 @@
 		"inherits": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-			"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-			"dev": true
+			"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
 		},
 		"ini": {
 			"version": "1.3.5",
@@ -7483,8 +7570,7 @@
 		"isarray": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-			"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-			"dev": true
+			"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
 		},
 		"isexe": {
 			"version": "2.0.0",
@@ -8748,8 +8834,7 @@
 		"methods": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-			"integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
-			"dev": true
+			"integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
 		},
 		"micromatch": {
 			"version": "3.1.10",
@@ -8785,20 +8870,17 @@
 		"mime": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-			"dev": true
+			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
 		},
 		"mime-db": {
 			"version": "1.42.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.42.0.tgz",
-			"integrity": "sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ==",
-			"dev": true
+			"integrity": "sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ=="
 		},
 		"mime-types": {
 			"version": "2.1.25",
 			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.25.tgz",
 			"integrity": "sha512-5KhStqB5xpTAeGqKBAMgwaYMnQik7teQN4IAzC7npDv6kzeU6prfkR67bc87J1kWMPGkoaZSq1npmexMgkmEVg==",
-			"dev": true,
 			"requires": {
 				"mime-db": "1.42.0"
 			}
@@ -10401,8 +10483,7 @@
 		"process-nextick-args": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-			"integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
-			"dev": true
+			"integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
 		},
 		"progress": {
 			"version": "2.0.3",
@@ -10419,8 +10500,7 @@
 		"promise-polyfill": {
 			"version": "8.1.3",
 			"resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.1.3.tgz",
-			"integrity": "sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==",
-			"dev": true
+			"integrity": "sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g=="
 		},
 		"prompts": {
 			"version": "2.3.0",
@@ -10550,8 +10630,7 @@
 		"qs": {
 			"version": "6.5.2",
 			"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-			"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-			"dev": true
+			"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
 		},
 		"querystring": {
 			"version": "0.2.0",
@@ -10784,7 +10863,6 @@
 			"version": "2.3.6",
 			"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
 			"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-			"dev": true,
 			"requires": {
 				"core-util-is": "~1.0.0",
 				"inherits": "~2.0.3",
@@ -11317,8 +11395,7 @@
 		"safe-buffer": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-			"dev": true
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
 		},
 		"safe-regex": {
 			"version": "1.1.0",
@@ -12411,7 +12488,6 @@
 			"version": "1.1.1",
 			"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
 			"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-			"dev": true,
 			"requires": {
 				"safe-buffer": "~5.1.0"
 			}
@@ -12984,6 +13060,38 @@
 				"postcss": "^7.0.2"
 			}
 		},
+		"superagent": {
+			"version": "3.8.3",
+			"resolved": "https://registry.npmjs.org/superagent/-/superagent-3.8.3.tgz",
+			"integrity": "sha512-GLQtLMCoEIK4eDv6OGtkOoSMt3D+oq0y3dsxMuYuDvaNUvuT8eFBuLmfR0iYYzHC1e8hpzC6ZsxbuP6DIalMFA==",
+			"requires": {
+				"component-emitter": "^1.2.0",
+				"cookiejar": "^2.1.0",
+				"debug": "^3.1.0",
+				"extend": "^3.0.0",
+				"form-data": "^2.3.1",
+				"formidable": "^1.2.0",
+				"methods": "^1.1.1",
+				"mime": "^1.4.1",
+				"qs": "^6.5.1",
+				"readable-stream": "^2.3.5"
+			},
+			"dependencies": {
+				"debug": {
+					"version": "3.2.6",
+					"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+					"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+					"requires": {
+						"ms": "^2.1.1"
+					}
+				},
+				"ms": {
+					"version": "2.1.2",
+					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+				}
+			}
+		},
 		"supports-color": {
 			"version": "5.5.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -13603,6 +13711,11 @@
 				}
 			}
 		},
+		"url-join": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+			"integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA=="
+		},
 		"url-parse": {
 			"version": "1.4.7",
 			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
@@ -13631,8 +13744,7 @@
 		"util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-			"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-			"dev": true
+			"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
 		},
 		"util.promisify": {
 			"version": "1.0.0",
@@ -14345,6 +14457,11 @@
 				"string-width": "^1.0.2 || 2"
 			}
 		},
+		"winchan": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/winchan/-/winchan-0.2.2.tgz",
+			"integrity": "sha512-pvN+IFAbRP74n/6mc6phNyCH8oVkzXsto4KCHPJ2AScniAnA1AmeLI03I2BzjePpaClGSI4GUMowzsD3qz5PRQ=="
+		},
 		"word-wrap": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
diff --git a/package.json b/package.json
index 125c4536..f34b408f 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "types": "./types.d.ts",
   "scripts": {
     "// LOCAL DEV": "",
-    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --inline",
+    "start": "cross-env NODE_ENV=development webpack-dev-server --https --hot --inline",
     "start:nohot": "cross-env HOT=false NODE_ENV=development webpack-dev-server",
     "// PRODUCTION BUILDS": "",
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
@@ -109,11 +109,13 @@
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
+    "@auth0/auth0-spa-js": "^1.6.3",
     "@babel/runtime": "^7.7.2",
     "@nice-digital/browserslist-config": "^1.0.0",
     "@nice-digital/icons": "^2.1.1",
     "@nice-digital/nds-core": "1.0.11-alpha.0",
     "accessible-autocomplete": "^1.6.2",
+    "auth0-js": "^9.12.2",
     "classnames": "^2.2.6",
     "es5-polyfill": "0.0.6",
     "js-cookie": "^2.2.1",
diff --git a/src/Header/Account/Account.jsx b/src/Header/Account/Account.jsx
index ed9f156c..3089f48e 100644
--- a/src/Header/Account/Account.jsx
+++ b/src/Header/Account/Account.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
@@ -87,20 +87,22 @@ export default class Account extends Component {
 
 	componentDidMount() {
 		if (this.state.useIdAM) {
-			//nice accounts supplies links like: {"John Holland":"https://accounts.nice.org.uk/users/143980/editprofile","Sign out":"https://accounts.nice.org.uk/signout"}
-			//idam supplies links like:[{ key: "My profile", value: "/Account/todo" },{ key: "Sign out", value: "/Account/Logout" }]
-			//the following just converts the idam format to the nice accounts format.
-			const links = this.props.links.reduce(function(links, link) {
-				links[link.text] = link.url;
-				return links;
-			}, {});
-			const convertedData = {
-				display_name: this.props.displayName,
-				links: links
-			};
-
-			if (this.props.onLoginStatusChecked) {
-				this.props.onLoginStatusChecked(convertedData);
+			if (!this.props.useIdamPopupLogin && !this.props.useIdamInlineLogin) {
+				//nice accounts supplies links like: {"John Holland":"https://accounts.nice.org.uk/users/143980/editprofile","Sign out":"https://accounts.nice.org.uk/signout"}
+				//idam supplies links like:[{ key: "My profile", value: "/Account/todo" },{ key: "Sign out", value: "/Account/Logout" }]
+				//the following just converts the idam format to the nice accounts format.
+				const links = this.props.links.reduce(function(links, link) {
+					links[link.text] = link.url;
+					return links;
+				}, {});
+				const convertedData = {
+					display_name: this.props.displayName,
+					links: links
+				};
+
+				if (this.props.onLoginStatusChecked) {
+					this.props.onLoginStatusChecked(convertedData);
+				}
 			}
 		} else {
 			//NICE accounts
@@ -125,7 +127,9 @@ export default class Account extends Component {
 
 		let signInLink = {};
 		if (this.state.useIdAM) {
-			signInLink = this.props.links[0];
+			if (!this.props.useIdamPopupLogin && !this.props.useIdamInlineLogin) {
+				signInLink = this.props.links[0];
+			}
 		} else {
 			signInLink["text"] = "Sign in";
 			signInLink["url"] = getDomainBaseUrl(environment) + "signin";
@@ -152,7 +156,17 @@ export default class Account extends Component {
 					aria-labelledby="my-account-button"
 					onKeyDown={this.handleKeyDown}
 				>
-					{accountsData.links &&
+					{this.props.useIdamPopupLogin || this.props.useIdamInlineLogin ? (
+						<li key={"idamSignout"} role="presentation">
+							<button
+								onClick={this.props.onIdAMLogoutClick}
+								className={styles.button}
+							>
+								Sign out
+							</button>
+						</li>
+					) : (
+						accountsData.links &&
 						Object.keys(accountsData.links).map(
 							function(text, i) {
 								return (
@@ -173,9 +187,35 @@ export default class Account extends Component {
 									</li>
 								);
 							}.bind(this)
-						)}
+						)
+					)}
 				</ul>
 			</div>
+		) : this.state.useIdAM &&
+		  (this.props.useIdamPopupLogin || this.props.useIdamInlineLogin) ? (
+			<Fragment>
+				{this.props.useIdamInlineLogin && (
+					<Fragment>
+						<span>Email: </span>
+						<input
+							type="text"
+							onChange={e =>
+								this.props.onSignInDetailsChange(true, e.target.value)
+							}
+						/>
+						<span>Password: </span>
+						<input
+							type="password"
+							onChange={e =>
+								this.props.onSignInDetailsChange(false, e.target.value)
+							}
+						/>
+					</Fragment>
+				)}
+				<button onClick={this.props.onIdAMLoginClick} className={styles.button}>
+					Sign in
+				</button>
+			</Fragment>
 		) : (
 			<a
 				href={signInLink.url}
@@ -212,7 +252,13 @@ Account.propTypes = {
 			url: PropTypes.string.isRequired
 		})
 	),
-	displayName: PropTypes.string
+	displayName: PropTypes.string,
+	mode: PropTypes.oneOf(["links", "popup", "inline"]),
+	useIdamPopupLogin: PropTypes.bool,
+	useIdamInlineLogin: PropTypes.bool,
+	onIdAMLoginClick: PropTypes.func,
+	onIdAMLogoutClick: PropTypes.func,
+	onSignInDetailsChange: PropTypes.func
 };
 
 Account.defaultProps = {
diff --git a/src/Header/Header.jsx b/src/Header/Header.jsx
index 0ffea1eb..1463d82a 100644
--- a/src/Header/Header.jsx
+++ b/src/Header/Header.jsx
@@ -2,7 +2,10 @@ import React, { Component } from "react";
 import { hot } from "react-hot-loader/root";
 import PropTypes from "prop-types";
 import LogoIcon from "@nice-digital/icons/lib/LogoFull";
+import createAuth0Client from "@auth0/auth0-spa-js";
+import auth0 from "auth0-js";
 
+import config from "../../auth_config.json";
 import {
 	defaultEventCategory,
 	headerClickEventAction,
@@ -25,19 +28,94 @@ export class Header extends Component {
 			isExpanded: false,
 			isLoggedIn: false,
 			accountsData: null,
-			needsSkipLinkTarget: false
+			needsSkipLinkTarget: false,
+			auth0Client: null,
+			popupOpen: false,
+			useIdamPopupLogin:
+				this.props.auth &&
+				this.props.auth.provider === "idam" &&
+				this.props.auth.mode === "popup",
+			useIdamInlineLogin:
+				this.props.auth &&
+				this.props.auth.provider === "idam" &&
+				this.props.auth.mode === "inline",
+			idamAccessToken: null,
+			email: null,
+			password: null
 		};
 
 		this.handleMobileMenuBtnClick = this.handleMobileMenuBtnClick.bind(this);
 		this.handleLoginStatusChecked = this.handleLoginStatusChecked.bind(this);
 		this.handleLogoClick = this.handleLogoClick.bind(this);
+		this.handleIdamLogin = this.handleIdamLogin.bind(this);
+		this.handleIdamLogout = this.handleIdamLogout.bind(this);
+		this.getIdAMToken = this.getIdAMToken.bind(this);
+		this.getAuth0Client = this.getAuth0Client.bind(this);
+		this.handleSignInDetailsChange = this.handleSignInDetailsChange.bind(this);
 	}
 
-	componentDidMount() {
+	async getAuth0Client() {
+		if (this.state.useIdamPopupLogin) {
+			return await createAuth0Client({
+				domain: config.domain,
+				client_id: config.clientId,
+				redirect_uri: window.location.origin
+			});
+		}
+		return new auth0.WebAuth({
+			domain: config.domain,
+			clientID: config.clientId,
+			redirectUri: window.location.href,
+			responseType: "code token id_token"
+		});
+	}
+
+	async componentDidMount() {
 		this.setState({
 			needsSkipLinkTarget:
 				document.getElementById(this.props.skipLinkId) == null
 		});
+		if (this.state.useIdamPopupLogin || this.state.useIdamInlineLogin) {
+			this.setState(
+				{
+					auth0Client: await this.getAuth0Client()
+				},
+				async () => {
+					if (this.state.useIdamPopupLogin) {
+						this.setState(
+							{
+								isLoggedIn: await this.state.auth0Client.isAuthenticated()
+							},
+							() => {
+								window.idamIsAuthenticated = this.state.isLoggedIn;
+							}
+						);
+					} else {
+						//inline
+						await this.state.auth0Client.checkSession(
+							{},
+							checkSessionResponse => {
+								console.log(
+									"check session callback:" +
+										JSON.stringify(checkSessionResponse)
+								);
+								const isLoggedIn =
+									checkSessionResponse == null ||
+									checkSessionResponse.error == null;
+								this.setState(
+									{
+										isLoggedIn: isLoggedIn
+									},
+									() => {
+										window.idamIsAuthenticated = this.state.isLoggedIn;
+									}
+								);
+							}
+						);
+					}
+				}
+			);
+		}
 	}
 
 	handleMobileMenuBtnClick() {
@@ -72,6 +150,81 @@ export class Header extends Component {
 		}
 	}
 
+	handleSignInDetailsChange(isEmail, text) {
+		if (isEmail) {
+			this.setState({ email: text });
+		} else {
+			this.setState({ password: text });
+		}
+	}
+
+	async getIdAMToken() {
+		if (this.state.useIdamPopupLogin)
+			return await this.state.auth0Client.getTokenSilently();
+		else return this.state.idamAccessToken;
+	}
+
+	async handleIdamLogin() {
+		if (this.state.useIdamPopupLogin) {
+			this.setState({
+				popupOpen: true
+			});
+			try {
+				await this.state.auth0Client.loginWithPopup({});
+				this.handleLoginStatusChecked({ display_name: "signed in" });
+
+				window.idamUser = await this.state.auth0Client.getUser();
+				window.idamGetToken = this.getIdAMToken;
+				window.idamIsAuthenticated = true;
+			} catch (error) {
+				console.error(error);
+			} finally {
+				this.setState({
+					popupOpen: false
+				});
+			}
+		} else {
+			//inline
+			this.state.auth0Client.client.login(
+				{
+					realm: "Identity",
+					username: this.state.email,
+					password: this.state.password
+				},
+				(err, authResult) => {
+					if (err) {
+						console.log("login callback with error :" + JSON.stringify(err));
+						return;
+					}
+					const that = this;
+					this.state.auth0Client.client.userInfo(
+						authResult.accessToken,
+						function(err, user) {
+							if (err) {
+								console.log(
+									"userInfo callback with error :" + JSON.stringify(err)
+								);
+								return;
+							}
+							console.log("user:" + JSON.stringify(user));
+							that.handleLoginStatusChecked({ display_name: user.name });
+							window.idamUser = user;
+							window.idamIsAuthenticated = true;
+							window.idamGetToken = that.getIdAMToken;
+							that.setState({ idamAccessToken: authResult.accessToken });
+						}
+					);
+				}
+			);
+		}
+	}
+
+	async handleIdamLogout() {
+		await this.state.auth0Client.logout({ returnTo: window.location.href });
+		this.handleLoginStatusChecked({ display_name: null });
+		window.idamIsAuthenticated = false;
+	}
+
 	render() {
 		return (
 			this.props.enabled !== false && (
@@ -111,11 +264,22 @@ export class Header extends Component {
 								{this.state.isExpanded ? "Close" : "Menu"}
 							</button>
 							{this.props.auth !== false && (
-								<div className={styles.account}>
+								<div
+									className={
+										this.state.useIdamInlineLogin
+											? styles.account_inline
+											: styles.account
+									}
+								>
 									<Account
 										onLoginStatusChecked={this.handleLoginStatusChecked}
 										isLoggedIn={this.state.isLoggedIn}
 										accountsData={this.state.accountsData}
+										useIdamPopupLogin={this.state.useIdamPopupLogin}
+										useIdamInlineLogin={this.state.useIdamInlineLogin}
+										onIdAMLoginClick={this.handleIdamLogin}
+										onIdAMLogoutClick={this.handleIdamLogout}
+										onSignInDetailsChange={this.handleSignInDetailsChange}
 										{...this.props.auth}
 									/>
 								</div>
@@ -125,6 +289,10 @@ export class Header extends Component {
 					<Nav
 						service={this.props.service}
 						isExpanded={this.state.isExpanded}
+						useIdamPopupLogin={this.state.useIdamPopupLogin}
+						onIdAMLoginClick={this.handleIdamLogin}
+						onIdAMLogoutClick={this.handleIdamLogout}
+						isAuthenticated={this.state.isLoggedIn}
 						accountsLinks={
 							this.state.accountsData && this.state.accountsData.links
 						}
@@ -146,7 +314,7 @@ Header.propTypes = {
 	enabled: PropTypes.bool,
 	search: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
 	cookie: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-	auth: PropTypes.object,
+	auth: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
 	onNavigating: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
diff --git a/src/Header/Header.module.scss b/src/Header/Header.module.scss
index 2803c725..25edab00 100644
--- a/src/Header/Header.module.scss
+++ b/src/Header/Header.module.scss
@@ -115,6 +115,14 @@
   display: none;
 }
 
+.account_inline {
+  @extend .account;
+
+  input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]) { //todo: this needs fixing.
+    width: 15rem;
+  }
+}
+
 @include mq($until: md) {
   .home {
     float: none;
@@ -156,4 +164,8 @@
   .account {
     display: block;
   }
+
+  .account_inline {
+    display: inline-flex;
+  }
 }
diff --git a/src/Header/Nav/Nav.jsx b/src/Header/Nav/Nav.jsx
index f2738143..2decaf1a 100644
--- a/src/Header/Nav/Nav.jsx
+++ b/src/Header/Nav/Nav.jsx
@@ -183,6 +183,36 @@ export default class Nav extends Component {
 						</div>
 					</nav>
 				)}
+				{this.props.useIdamPopupLogin && (
+					<nav
+						aria-label="My account"
+						className={classnames(styles.nav, styles.myAccount)}
+					>
+						<div className={styles.menuWrapper}>
+							<ul className={styles.menuList} role="menu">
+								<li key="idamSigninOrout" role="presentation">
+									{this.props.isAuthenticated ? (
+										<button
+											role="menuitem"
+											className={styles.link}
+											onClick={this.props.onIdAMLogoutClick}
+										>
+											Sign out
+										</button>
+									) : (
+										<button
+											role="menuitem"
+											className={styles.link}
+											onClick={this.props.onIdAMLoginClick}
+										>
+											Sign in
+										</button>
+									)}
+								</li>
+							</ul>
+						</div>
+					</nav>
+				)}
 			</div>
 		);
 	}
@@ -192,5 +222,9 @@ Nav.propTypes = {
 	service: PropTypes.string,
 	isExpanded: PropTypes.bool,
 	accountsLinks: PropTypes.object,
-	onNavigating: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+	onNavigating: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+	useIdamPopupLogin: PropTypes.bool,
+	onIdAMLoginClick: PropTypes.func,
+	onIdAMLogoutClick: PropTypes.func,
+	isAuthenticated: PropTypes.bool
 };
diff --git a/src/Header/Nav/Nav.module.scss b/src/Header/Nav/Nav.module.scss
index dd77ad6a..bff202fc 100644
--- a/src/Header/Nav/Nav.module.scss
+++ b/src/Header/Nav/Nav.module.scss
@@ -54,8 +54,10 @@
   }
 }
 
-a.link {
+a.link,
+button.link {
   //qualified this with a to add specificity to avoid overrides from application css (NW-1253)
+  background-color: transparent;
   border: rem($nds-spacing-x-small) solid $colour-nav-background;
   border-bottom-width: 0;
   border-top-width: 0;
diff --git a/src/Header/Search/Autocomplete/Autocomplete.module.scss b/src/Header/Search/Autocomplete/Autocomplete.module.scss
index e0ef5522..0b3c1000 100644
--- a/src/Header/Search/Autocomplete/Autocomplete.module.scss
+++ b/src/Header/Search/Autocomplete/Autocomplete.module.scss
@@ -57,18 +57,18 @@
     }
 
     .autocomplete__input--show-all-values {
-      padding: 4px 34px 4px 4px;
       cursor: pointer;
+      padding: 4px 34px 4px 4px;
     }
 
     .autocomplete__dropdown-arrow-down {
-      z-index: -1;
       display: inline-block;
+      height: 24px;
       position: absolute;
       right: 8px;
-      width: 24px;
-      height: 24px;
       top: 10px;
+      width: 24px;
+      z-index: -1;
     }
 
     .autocomplete__menu {
@@ -95,9 +95,9 @@
 
     .autocomplete__menu--overlay {
       box-shadow: rem(
-          0 $nds-spacing-x-small $nds-spacing-medium $nds-spacing-x-small
-        )
-        rgba(0, 0, 0, 0.1);
+        0 $nds-spacing-x-small $nds-spacing-medium $nds-spacing-x-small
+      )
+        rgba(0, 0, 0, .1);
       left: 0;
       position: absolute;
       top: 100%;
diff --git a/src/Header/Search/Autocomplete/Autocomplete.test.jsx b/src/Header/Search/Autocomplete/Autocomplete.test.jsx
index 66e1dbb4..c3ea6fe4 100644
--- a/src/Header/Search/Autocomplete/Autocomplete.test.jsx
+++ b/src/Header/Search/Autocomplete/Autocomplete.test.jsx
@@ -112,7 +112,7 @@ describe("Autocomplete", () => {
 
 		it("should not load suggestions within the reate limit threshold", () => {
 			jest.useFakeTimers();
-			const callback = () => {};
+			//const callback = () => {};
 			const wrapper = shallow(
 				<Autocomplete {...defaultProps} source="/url" query="test" />
 			);
diff --git a/src/Header/__snapshots__/Header.test.jsx.snap b/src/Header/__snapshots__/Header.test.jsx.snap
index 03187fe6..85aeb2c6 100644
--- a/src/Header/__snapshots__/Header.test.jsx.snap
+++ b/src/Header/__snapshots__/Header.test.jsx.snap
@@ -54,7 +54,10 @@ exports[`Header Matches snapshot 1`] = `
           accountsData={null}
           environment="live"
           isLoggedIn={false}
+          onIdAMLoginClick={[Function]}
+          onIdAMLogoutClick={[Function]}
           onLoginStatusChecked={[Function]}
+          onSignInDetailsChange={[Function]}
           provider="niceAccounts"
         />
       </div>
@@ -62,7 +65,10 @@ exports[`Header Matches snapshot 1`] = `
   </div>
   <Nav
     accountsLinks={null}
+    isAuthenticated={false}
     isExpanded={false}
+    onIdAMLoginClick={[Function]}
+    onIdAMLogoutClick={[Function]}
     onNavigating="onNavigatingHandler"
     service={null}
   />