okta.github.io/code/javascript/okta_angular_auth_js.html at master · alexcodebr/okta.github.io

742 lines (456 loc) · 42.7 KB
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
    var searchDomain = 'https://developer.okta.com';
    var isProduction = window.location.hostname === 'developer.okta.com';
    if (isProduction) {
      // TypeKit
      (function(d) {
        var config = {
          kitId: 'jff5neq',
          scriptTimeout: 3000,
          async: true
        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/bwf-loadingb/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
      })(document);
      // Google analytics
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-15777010-3', 'auto');
      ga('send', 'pageview');
      // START Google Tag Manager
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-TJ45R6');
      // END Google Tag Manager
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link type="text/css" rel="stylesheet" href="https://developer.okta.com/sites/all/themes/developer/css/master.css" media="all" />
  <meta class="swiftype" name="title" data-type="string" content="Angular + Okta Auth SDK | Okta Developer" />
  <meta class="swiftype" name="summary" data-type="string" content="Integrate Okta with an Angular application using Auth JS." />
  <link type="text/css" rel="stylesheet" href="/assets/animate-ec43d72c3ed45e08a460b8a2966d8dba6006aebfa0530935c3973fa493a8771f.css">
  <link type="text/css" rel="stylesheet" href="/assets/okta-02e8cdc3d2d5a46c79e19b950147e17ceaefde8981fb953c8ee653cef384c5d6.css">
  <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
  <title>Angular + Okta Auth SDK | Okta Developer</title>
  <meta name="description" content="Integrate Okta with an Angular application using Auth JS.">
  <link rel="canonical" href="https://developer.okta.com/code/javascript/okta_angular_auth_js">
  <link rel="alternate" type="application/rss+xml" title="Okta Developer" href="https://developer.okta.com/feed.xml"><!-- GA -->
  <div class="Page Page--docs-page">
    <!-- START Header -->
<header class="Header is-fixed">
  <div class="Wrap">
    <a class="Logo" href="https://developer.okta.com">
      <svg version="1.1" id="OktaLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 431.9 151.4" style="enable-background:new 0 0 431.9 151.4;" xml:space="preserve"><g><g><g><path d="M102.2,41.4c-21,0-38.1,17.1-38.1,38.1s17.1,38.1,38.1,38.1s38.1-17.1,38.1-38.1l0,0C140.3,58.5,123.2,41.4,102.2,41.4z M102.2,98.5c-10.5,0-19-8.5-19-19s8.5-19,19-19s19,8.5,19,19c0.1,10.5-8.4,19-18.9,19.1C102.3,98.6,102.2,98.6,102.2,98.5L102.2,98.5z"/><path d="M169.1,92.3c0-1.9,1.5-3.4,3.4-3.4c0.9,0,1.8,0.4,2.4,1c9.5,9.7,25.3,26.3,25.4,26.4c0.4,0.5,0.8,0.8,1.4,0.9l1.6,0.2h17.2c1.8,0,3.3-1.4,3.4-3.2c0-0.8-0.3-1.5-0.8-2.2l-28.6-29.2l-1.5-1.5c-3.2-3.9-2.9-5.4,0.8-9.3l22.6-25.1c1.1-1.4,0.8-3.5-0.6-4.6c-0.6-0.4-1.3-0.7-2-0.7h-17c-0.6,0.2-1.1,0.5-1.5,0.9L175,64.4c-1.3,1.4-3.4,1.5-4.8,0.2c-0.7-0.6-1.1-1.5-1.1-2.5V18.9c0-1.7-1.3-3-3-3c-0.1,0-0.2,0-0.3,0h-12.7c-2.2,0-3.3,1.5-3.3,2.8v95.8c0,2.2,1.8,2.8,3.3,2.8h12.7c1.7,0.1,3.2-1.2,3.3-2.9c0,0,0,0,0,0V92.3z"/><path d="M273,114l-1.4-12.8c-0.2-1.7-1.7-2.9-3.4-2.7c0,0,0,0-0.1,0l-2.9,0.2c-10.1,0-18.5-7.9-19-18c0-0.3,0-0.7,0-1V64.2c-0.1-2,1.5-3.6,3.5-3.7c0,0,0,0,0,0h17c1.7-0.1,3.1-1.5,3-3.2c0,0,0-0.1,0-0.1v-12c0-2.3-1.5-3.6-2.8-3.6h-17.1c-1.9,0.1-3.5-1.5-3.6-3.4c0,0,0,0,0,0V18.9c-0.1-1.7-1.5-3.1-3.2-3c0,0-0.1,0-0.1,0h-12.7c-1.6-0.1-3,1.1-3.1,2.7c0,0.1,0,0.1,0,0.2c0,0,0,61.7,0,62c0.5,21,17.9,37.6,38.9,37c1.4,0,2.9-0.2,4.3-0.3C272,117.2,273.2,115.7,273,114z"/></g><path d="M364.7,98c-10.8,0-12.4-3.8-12.4-18.3l0,0V44.8c0-1.8-1.4-3.2-3.2-3.2c0,0-0.1,0-0.1,0h-12.8c-1.8,0-3.2,1.4-3.3,3.2v1.6C314.6,36,291.3,42.5,281,60.8c-10.4,18.3-3.9,41.6,14.4,51.9c14,7.9,31.4,6.2,43.5-4.2c3.6,5.5,9.3,9.1,18.3,9.1c1.5,0,9.7,0.3,9.7-3.5v-13.6C367,99.2,366,98.1,364.7,98z M314.2,98.6c-10.5,0-19-8.5-19-19s8.5-19,19-19s19,8.5,19,19l0,0C333.2,90.1,324.7,98.6,314.2,98.6z"/></g><path d="M19.4,74c2.2-1.9,4.1-4.1,5.7-6.6c3.5-5.3,5.4-11.5,5.2-17.9V27c0-4.9,0.9-8.4,2.7-10.5c1.8-2.1,4.8-3,9.2-3h12.6c1.2,0,2.1-0.9,2.2-2.1l0,0V2.2C57,1,56,0,54.8,0c0,0,0,0,0,0H41.5c-7.8,0-12.9,2.1-18,7.6s-7.1,12.3-7.1,21.7v14.2c0,2.2-0.1,4-0.2,5.7v2.2c-0.5,3.2-1.8,6.2-3.6,8.9C9.4,64.7,5.1,70.9,0.9,74l0,0l-0.3,0.3l0,0l-0.2,0.3H0.2v0.3l0,0c-0.1,0.3-0.1,0.7,0,1l0,0v0.3h0.1l0.2,0.3l0,0l0.3,0.3l0,0c4.2,3.1,8.5,9.3,11.3,13.7c1.8,2.7,3.1,5.7,3.6,8.9v2.2c0.1,1.6,0.2,3.5,0.2,5.7v14.3c0,9.4,2.4,16.7,7.1,21.7s10.2,7.6,18,7.6h13.8c1.2,0,2.2-1,2.2-2.2V140l0,0c0-1.2-1-2.2-2.2-2.2H42.2c-4.4,0-7.5-1-9.2-3s-2.7-5.6-2.7-10.5v-22.4c0.2-6.4-1.7-12.6-5.2-17.9c-1.6-2.5-3.5-4.7-5.7-6.6l0,0c-0.9-0.7-1.1-2-0.4-2.9C19.2,74.3,19.3,74.2,19.4,74L19.4,74z"/><path d="M412.5,74c-2.2-1.9-4.1-4.1-5.7-6.6c-3.5-5.3-5.4-11.5-5.2-17.9V27c0-4.9-0.9-8.4-2.7-10.5s-4.8-3-9.2-3h-12.6c-1.2,0-2.2-1-2.2-2.2c0,0,0,0,0,0l0,0V2.2c0-1.2,1-2.2,2.2-2.2c0,0,0,0,0,0h13.4c7.8,0,12.9,2.1,18,7.6s7.1,12.3,7.1,21.7v14.2c0,2.2,0.1,4,0.2,5.7v2.2c0.5,3.2,1.8,6.2,3.6,8.9c2.8,4.5,7.1,10.7,11.3,13.7l0,0l0.3,0.3l0,0l0.2,0.3h0.1v0.3l0,0c0.1,0.3,0.1,0.7,0,1l0,0v0.3h-0.1l-0.2,0.3l0,0l-0.3,0.3l0,0c-4.2,3.1-8.5,9.3-11.3,13.7c-1.8,2.7-3.1,5.7-3.6,8.9v2.2c-0.1,1.6-0.2,3.5-0.2,5.7v14.3c0,9.4-2.4,16.7-7.1,21.7s-10.2,7.6-18,7.6h-13.4c-1.2,0-2.2-1-2.2-2.2c0,0,0,0,0,0V140l0,0c0-1.2,1-2.2,2.2-2.2l0,0h12.7c4.4,0,7.5-1,9.2-3s2.7-5.6,2.7-10.5v-22.4c-0.2-6.3,1.6-12.6,5.1-17.9c1.6-2.5,3.5-4.7,5.7-6.6l0,0c0.9-0.7,1.1-2,0.4-2.9C412.7,74.3,412.6,74.2,412.5,74L412.5,74z"/></g></svg>
    <nav class="Header-nav PrimaryNav">
      <ul class="menu">
        <li class="first leaf">
          <a href="https://developer.okta.com/product/">Product</a>
        </li>
        <li class="leaf">
          <a href="https://developer.okta.com/pricing/">Pricing</a>
        </li>
        <li class="leaf">
          <a href="/blog/">Blog</a>
        </li>
        <li class="leaf">
          <a href="/documentation/" class="active">Docs</a>
        </li>
        <li class="last expanded">
          <span class="nolink">Support</span>
          <ul class="menu">
            <li class="first leaf"><a href="https://devforum.okta.com/">Okta Developer Forums</a></li>
            <li class="leaf"><a href="mailto:developers@okta.com">developers@okta.com</a></li>
            <li class="last leaf"><a href="tel:18887227871">1 (888) 722-7871</a></li>
          </ul>
        </li>
      </ul>
      <a class="PrimaryNav-toggle" href="#">
        <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g class="MenuIcon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
                <path d="M1,16 L19,16" class="MenuIcon-line1" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M1,4 L19,4" class="MenuIcon-line2" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M1,10 L19,10" class="MenuIcon-line3" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M1,10 L19,10" class="MenuIcon-line4" stroke="#FFFFFF" stroke-width="2"></path>
            </g>
        </svg>
        <svg class="CloseIcon" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="ALl-Boards" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Desktop" transform="translate(-915.000000, -235.000000)" fill="#FFFFFF">
              <g id="Search-bar-Active" transform="translate(30.000000, 26.000000)">
                <polygon id="Icon/Cross" points="901 210.6 899.4 209 893 215.4 886.6 209 885 210.6 891.4 217 885 223.4 886.6 225 893 218.6 899.4 225 901 223.4 894.6 217"></polygon>
              </g>
            </g>
          </g>
        </svg>
      <div class="PrimaryNav-cta">
        <a href="https://developer.okta.com/signup/" class="Button--red">Sign up</a>
      </div>
      <a class="SearchIcon" href="#"></a>
      <form id="form_search" class="SearchBar Formisimo_clocked_69929" method="get" action="https://developer.okta.com/search/" name="form_search" __bizdiag="-784164280" __biza="WJ__">
        <input type="text" name="stq" autocomplete="off" id="st-search-input-auto" class="st-search-input" placeholder="Search">
        <input type="submit" name="submit" value="GO">
      </form>
    <!-- END Header -->
    <!-- START Page Center w/Sub Nav & Content -->
    <section class="PageContent DynamicSidebar has-tableOfContents">
      <!-- START Fixed sidebar -->
      <aside class="Sidebar">
        <h2 class="Sidebar-location Sidebar-toggle h6">Navigation</h2>
        <div class="Sidebar-close Sidebar-toggle"></div>
        <div>
          <h3 class="Sidebar-title">Client Integrations</h3>
          <ul class="Sidebar-nav">
              <li >
                <a href="/code/javascript/">JAVASCRIPT</a>
              </li>
              <li >
                <a href="/code/swift/">SWIFT</a>
              </li>
          </ul>
          <h3 class="Sidebar-title">Server Integrations</h3>
          <ul class="Sidebar-nav">
              <li >
                <a href="/code/dotnet/">.NET</a>
              </li>
              <li >
                <a href="/code/java/">JAVA</a>
              </li>
              <li >
                <a href="/code/php/">PHP</a>
              </li>
              <li >
                <a href="/code/python/">PYTHON</a>
              </li>
          </ul>
        </div>
      </aside>
      <!-- END Fixed sidebar -->
      <!-- START Page Content -->
      <div class="PageContent-main">
        <h1 id="overview">Overview</h1>
<p>This guide will walk you through integrating authentication and authorization into an Angular application with Okta.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>If you do not already have a  <strong>Developer Edition Account</strong>, you can create one at <a href="/signup/">https://developer.okta.com/signup/</a>.</p>
<h3 id="add-an-openid-connect-client">Add an OpenID Connect Client</h3>
  <li>Log into the Okta Developer Dashboard, and <strong>Create New App</strong></li>
  <li>Choose <strong>Single Page App (SPA)</strong> as the platform, then populate your new OpenID Connect application with values similar to:</li>
      <th>Setting</th>
      <th>Value</th>
      <td>Application Name</td>
      <td>OpenId Connect App <em>(must be unique)</em></td>
      <td>Login redirect URIs</td>
      <td>http://localhost:4200/callback</td>
      <td>Logout redirect URIs</td>
      <td>http://localhost:4200/login</td>
<blockquote>
  <p><strong>Note:</strong> CORS is automatically enabled for the granted login redirect URIs.</p>
</blockquote>
<h2 id="create-an-angular-app">Create an Angular App</h2>
<p>To quickly create an Angular app, install the Angular CLI:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>npm install -g @angular/cli
</code></pre>
<p>Now, create a new application:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="gp">$ </span>ng new okta-app
</code></pre>
<p>This creates a new project named <code class="highlighter-rouge">okta-app</code> and installs all required dependencies.</p>
<p>The simplest way to add authentication into an Angular app is using the library <a href="okta_auth_sdk">Okta Auth JS</a>. We can install it via <code class="highlighter-rouge">npm</code>:</p>
<div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="o">[</span>okta-app] <span class="nv">$ </span>npm install @okta/okta-auth-js --save
</code></pre>
<h2 id="create-an-authentication-service">Create an Authentication Service</h2>
<p>Users can sign in to your Angular application a number of different ways.
The easiest, and most secure way is to use the <strong>default login page</strong>. This page renders the <a href="okta_sign-in_widget">Okta Sign-In Widget</a>, equipped to handle User Lifecycle operations, MFA, and more.</p>
<p>First, create <code class="highlighter-rouge">src/app/app.service.ts</code> as an authorization utility file and use it to bootstrap the required fields to login:</p>
<blockquote>
  <p>Important: We’re using Okta’s organization authorization server to make setup easy, but it’s less flexible than a custom authorization server. Most SPAs send access tokens to access APIs. If you’re building an API that will need to accept access tokens, <a href="/docs/how-to/set-up-auth-server.html#create-an-authorization-server">create an authorization server</a>.</p>
</blockquote>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="c1">// app.service.ts</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Injectable</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Router</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@angular/router'</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">OktaAuth</span> <span class="k">from</span> <span class="s1">'@okta/okta-auth-js/dist/okta-auth-js.min.js'</span><span class="p">;</span>
<span class="err">@</span><span class="nx">Injectable</span><span class="p">()</span>
<span class="k">export</span> <span class="kr">class</span> <span class="nx">OktaAuthService</span> <span class="p">{</span>
  <span class="nx">oktaAuth</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OktaAuth</span><span class="p">({</span>
    <span class="na">url</span><span class="p">:</span> <span class="s1">'https://{yourOktaDomain}.com'</span><span class="p">,</span>
    <span class="na">clientId</span><span class="p">:</span> <span class="s1">'{clientId}'</span><span class="p">,</span>
    <span class="na">issuer</span><span class="p">:</span> <span class="s1">'https://{yourOktaDomain}.com/oauth2/{authorizationServerId}'</span><span class="p">,</span>
    <span class="na">redirectUri</span><span class="p">:</span> <span class="s1">'http://localhost:4200/callback'</span><span class="p">,</span>
  <span class="p">});</span>
  <span class="kd">constructor</span><span class="p">(</span><span class="k">private</span> <span class="nx">router</span><span class="err">:</span> <span class="nx">Router</span><span class="p">)</span> <span class="p">{}</span>
  <span class="nx">isAuthenticated</span><span class="p">()</span> <span class="p">{</span>
    <span class="c1">// Checks if there is a current accessToken in the TokenManger.</span>
    <span class="k">return</span> <span class="o">!!</span><span class="k">this</span><span class="p">.</span><span class="nx">oktaAuth</span><span class="p">.</span><span class="nx">tokenManager</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'accessToken'</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="nx">login</span><span class="p">()</span> <span class="p">{</span>
    <span class="c1">// Launches the login redirect.</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">oktaAuth</span><span class="p">.</span><span class="nx">token</span><span class="p">.</span><span class="nx">getWithRedirect</span><span class="p">({</span> 
      <span class="na">responseType</span><span class="p">:</span> <span class="p">[</span><span class="s1">'id_token'</span><span class="p">,</span> <span class="s1">'token'</span><span class="p">],</span>
      <span class="na">scopes</span><span class="p">:</span> <span class="p">[</span><span class="s1">'openid'</span><span class="p">,</span> <span class="s1">'email'</span><span class="p">,</span> <span class="s1">'profile'</span><span class="p">]</span>
    <span class="p">});</span>
  <span class="p">}</span>
  <span class="k">async</span> <span class="nx">handleAuthentication</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">tokens</span> <span class="o">=</span> <span class="k">await</span> <span class="k">this</span><span class="p">.</span><span class="nx">oktaAuth</span><span class="p">.</span><span class="nx">token</span><span class="p">.</span><span class="nx">parseFromUrl</span><span class="p">();</span>
    <span class="nx">tokens</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">token</span> <span class="o">=&gt;</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">token</span><span class="p">.</span><span class="nx">idToken</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">oktaAuth</span><span class="p">.</span><span class="nx">tokenManager</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'idToken'</span><span class="p">,</span> <span class="nx">token</span><span class="p">);</span>
      <span class="p">}</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">token</span><span class="p">.</span><span class="nx">accessToken</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">oktaAuth</span><span class="p">.</span><span class="nx">tokenManager</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'accessToken'</span><span class="p">,</span> <span class="nx">token</span><span class="p">);</span>
      <span class="p">}</span>
    <span class="p">});</span>
  <span class="p">}</span>
  <span class="k">async</span> <span class="nx">logout</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">oktaAuth</span><span class="p">.</span><span class="nx">tokenManager</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
    <span class="k">await</span> <span class="k">this</span><span class="p">.</span><span class="nx">oktaAuth</span><span class="p">.</span><span class="nx">signOut</span><span class="p">();</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre>
<h2 id="create-an-authorization-guard">Create an Authorization Guard</h2>
<p>Now that you have a shared service to start, control, and end the authentication state, use it to protect the endpoints of an app.</p>
<p>Create <code class="highlighter-rouge">src/app/app.guard.ts</code> that implements <a href="https://angular.io/api/router/CanActivate"><code class="highlighter-rouge">CanActivate</code></a>:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="c1">// app.guard.ts</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Injectable</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Router</span><span class="p">,</span> <span class="nx">CanActivate</span><span class="p">,</span> <span class="nx">ActivatedRouteSnapshot</span><span class="p">,</span> <span class="nx">RouterStateSnapshot</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@angular/router'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">OktaAuthService</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'./app.service'</span><span class="p">;</span>
<span class="err">@</span><span class="nx">Injectable</span><span class="p">()</span>
<span class="k">export</span> <span class="kr">class</span> <span class="nx">OktaAuthGuard</span> <span class="k">implements</span> <span class="nx">CanActivate</span> <span class="p">{</span>
  <span class="nx">oktaAuth</span><span class="p">;</span>
  <span class="nx">authenticated</span><span class="p">;</span>
  <span class="kd">constructor</span><span class="p">(</span><span class="k">private</span> <span class="nx">okta</span><span class="err">:</span> <span class="nx">OktaAuthService</span><span class="p">,</span> <span class="k">private</span> <span class="nx">router</span><span class="err">:</span> <span class="nx">Router</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">authenticated</span> <span class="o">=</span> <span class="nx">okta</span><span class="p">.</span><span class="nx">isAuthenticated</span><span class="p">()</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">oktaAuth</span> <span class="o">=</span> <span class="nx">okta</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="nx">canActivate</span><span class="p">(</span><span class="nx">route</span><span class="err">:</span> <span class="nx">ActivatedRouteSnapshot</span><span class="p">,</span> <span class="nx">state</span><span class="err">:</span> <span class="nx">RouterStateSnapshot</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">authenticated</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span> <span class="p">}</span>
    <span class="c1">// Redirect to login flow.</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">oktaAuth</span><span class="p">.</span><span class="nx">login</span><span class="p">();</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre>
<p>Whenever a user attempts to access a route that is protected by <code class="highlighter-rouge">OktaAuthGuard</code>, it first checks to see if the user has been authenticated. If <code class="highlighter-rouge">isAuthenticated()</code> returns <code class="highlighter-rouge">false</code>, start the login flow.</p>
<p>Finally, inject the guard and service into <code class="highlighter-rouge">src/app/app.module.ts</code> so we can use it in any declared routes:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="c1">// app.module.ts</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserModule</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@angular/platform-browser'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">NgModule</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">RouterModule</span><span class="p">,</span> <span class="nx">Routes</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@angular/router'</span><span class="p">;</span>
<span class="c1">// Okta Guard and Service</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">OktaAuthGuard</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'./app.guard'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">OktaAuthService</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'./app.service'</span><span class="p">;</span>
</code></pre>
<h2 id="add-routes">Add Routes</h2>
<p>Lets take a look at what routes are needed:</p>
  <li><code class="highlighter-rouge">/</code>: A default page to handle basic control of the app.</li>
  <li><code class="highlighter-rouge">/callback</code>: Handle the response back from Okta and store the returned tokens.</li>
  <li><code class="highlighter-rouge">/protected</code>: A protected route by the <code class="highlighter-rouge">OktaAuthGuard</code>.</li>
<h3><code class="highlighter-rouge">/</code></h3>
<p>First, update <code class="highlighter-rouge">src/app/app.component.html</code> to provide the Login logic:</p>
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="c">&lt;!-- app.component.html --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">routerLink=</span><span class="s">"/"</span><span class="nt">&gt;</span> Home <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="err">*</span><span class="na">ngIf=</span><span class="s">"!oktaAuth.isAuthenticated()"</span> <span class="err">(</span><span class="na">click</span><span class="err">)="</span><span class="na">oktaAuth</span><span class="err">.</span><span class="na">login</span><span class="err">()"</span><span class="nt">&gt;</span> Login <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="err">*</span><span class="na">ngIf=</span><span class="s">"oktaAuth.isAuthenticated()"</span> <span class="err">(</span><span class="na">click</span><span class="err">)="</span><span class="na">oktaAuth</span><span class="err">.</span><span class="na">logout</span><span class="err">()"</span><span class="nt">&gt;</span> Logout <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">routerLink=</span><span class="s">"/protected"</span><span class="nt">&gt;</span> Protected <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;router-outlet&gt;&lt;/router-outlet&gt;</span>
</code></pre>
<p>Then, update <code class="highlighter-rouge">src/app/app.component.ts</code> to handle the <code class="highlighter-rouge">login()</code> and <code class="highlighter-rouge">logout()</code> calls:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="c1">// app.component.ts</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">OktaAuthService</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'./app.service'</span><span class="p">;</span>
<span class="err">@</span><span class="nx">Component</span><span class="p">({</span>
  <span class="na">selector</span><span class="p">:</span> <span class="s1">'app-root'</span><span class="p">,</span>
  <span class="na">templateUrl</span><span class="p">:</span> <span class="s1">'./app.component.html'</span><span class="p">,</span>
  <span class="na">styleUrls</span><span class="p">:</span> <span class="p">[</span><span class="s1">'./app.component.css'</span><span class="p">]</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kr">class</span> <span class="nx">AppComponent</span> <span class="p">{</span>
  <span class="kd">constructor</span><span class="p">(</span><span class="k">public</span> <span class="nx">oktaAuth</span><span class="err">:</span> <span class="nx">OktaAuthService</span><span class="p">)</span> <span class="p">{}</span>
<span class="p">}</span>
</code></pre>
<h3 id="callback"><code class="highlighter-rouge">/callback</code></h3>
<p>In order to handle the redirect back from Okta, we need to capture the token values from the URL. Use the <code class="highlighter-rouge">/callback</code> route to handle the logic of storing these tokens and redirecting back to the main page.</p>
<p>Create a new component <code class="highlighter-rouge">src/app/callback.component.ts</code>:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="c1">// callback.component.ts</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">OktaAuthService</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'./app.service'</span><span class="p">;</span>
<span class="err">@</span><span class="nx">Component</span><span class="p">({</span> <span class="na">template</span><span class="p">:</span> <span class="err">``</span> <span class="p">})</span>
<span class="k">export</span> <span class="kr">class</span> <span class="nx">CallbackComponent</span> <span class="p">{</span>
  <span class="kd">constructor</span><span class="p">(</span><span class="k">private</span> <span class="nx">okta</span><span class="err">:</span> <span class="nx">OktaAuthService</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// Handles the response from Okta and parses tokens</span>
    <span class="nx">okta</span><span class="p">.</span><span class="nx">handleAuthentication</span><span class="p">();</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre>
<h3 id="protected"><code class="highlighter-rouge">/protected</code></h3>
<p>This route will be protected by the <code class="highlighter-rouge">OktaAuthGuard</code>, only permitting users with a valid <code class="highlighter-rouge">accessToken</code>.</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="c1">// protected.component.ts</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'@angular/core'</span><span class="p">;</span>
<span class="err">@</span><span class="nx">Component</span><span class="p">({</span>
  <span class="na">selector</span><span class="p">:</span> <span class="s1">'app-secure'</span><span class="p">,</span>
  <span class="na">template</span><span class="p">:</span> <span class="err">``</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kr">class</span> <span class="nx">ProtectedComponent</span> <span class="p">{</span>
  <span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Protected endpont!"</span><span class="p">);</span> <span class="p">}</span>
<span class="p">}</span>
</code></pre>
<h3 id="connect-the-routes">Connect the Routes</h3>
<p>Add each of our new routes to <code class="highlighter-rouge">src/app/app.module.ts</code>:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="c1">// app.module.ts</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">CallbackComponent</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'./callback.component'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ProtectedComponent</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'./protected.component'</span><span class="p">;</span>
<span class="p">...</span>
<span class="kd">const</span> <span class="nx">appRoutes</span><span class="err">:</span> <span class="nx">Routes</span> <span class="o">=</span> <span class="p">[</span>
  <span class="p">{</span>
    <span class="na">path</span><span class="p">:</span> <span class="s1">'callback'</span><span class="p">,</span>
    <span class="na">component</span><span class="p">:</span> <span class="nx">CallbackComponent</span>
  <span class="p">},</span>
  <span class="p">{</span>
    <span class="na">path</span><span class="p">:</span> <span class="s1">'protected'</span><span class="p">,</span>
    <span class="na">component</span><span class="p">:</span> <span class="nx">ProtectedComponent</span><span class="p">,</span>
    <span class="na">canActivate</span><span class="p">:</span> <span class="p">[</span> <span class="nx">OktaAuthGuard</span> <span class="p">]</span>
  <span class="p">}</span>
<span class="p">]</span>
</code></pre>
<p><em>Notice how the path <a href="#protected">/protected</a> uses the <code class="highlighter-rouge">canActivate</code> parameter to gate access to the route.</em></p>
<p>Finally, update your <code class="highlighter-rouge">@NgModule</code> to include your project components and routes in <code class="highlighter-rouge">src/app/app.module.ts</code>:</p>
<div class="language-typescript highlighter-rouge"><pre class="highlight"><code><span class="c1">// app.module.ts</span>
<span class="err">@</span><span class="nx">NgModule</span><span class="p">({</span>
  <span class="na">declarations</span><span class="p">:</span> <span class="p">[</span>
    <span class="nx">AppComponent</span><span class="p">,</span>
    <span class="nx">CallbackComponent</span><span class="p">,</span>
    <span class="nx">ProtectedComponent</span>
  <span class="p">],</span>
  <span class="na">imports</span><span class="p">:</span> <span class="p">[</span>
    <span class="nx">BrowserModule</span><span class="p">,</span>
    <span class="nx">RouterModule</span><span class="p">.</span><span class="nx">forRoot</span><span class="p">(</span><span class="nx">appRoutes</span><span class="p">)</span>
  <span class="p">],</span>
  <span class="na">providers</span><span class="p">:</span> <span class="p">[</span>
    <span class="nx">OktaAuthGuard</span><span class="p">,</span>
    <span class="nx">OktaAuthService</span><span class="p">,</span>
  <span class="p">],</span>
  <span class="na">bootstrap</span><span class="p">:</span> <span class="p">[</span> <span class="nx">AppComponent</span> <span class="p">]</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kr">class</span> <span class="nx">AppModule</span> <span class="p">{</span> <span class="p">}</span>
</code></pre>
<h2 id="conclusion">Conclusion</h2>
<p>You have now successfully authenticated with Okta! Now what? With a user’s <code class="highlighter-rouge">id_token</code>, you have basic claims for the user’s identity. You can extend the set of claims by modifying the <code class="highlighter-rouge">scopes</code> to retrieve custom information about the user. This includes <code class="highlighter-rouge">locale</code>, <code class="highlighter-rouge">address</code>, <code class="highlighter-rouge">groups</code>, and <a href="../../docs/api/resources/oidc.html">more</a>.</p>
<h2 id="support">Support</h2>
<p>Have a question or see a bug? Post your question on <a href="https://devforum.okta.com/">Okta Developer Forums</a>.</p>
      </div>
      <!-- END Page Content -->
    </section>
    <!-- END Page Center w/Sub Nav & Content -->
    <!-- START Footer -->
    <footer class="Footer">
    <div class="Wrap">
        <div class="Row">
            <div class="Column--3 Column--medium-6 Column--xSmall-12">
                <a class="Logo" href="https://www.okta.com/" target="_blank" rel="noopener noreferrer">
                    <img src="https://developer.okta.com/sites/all/themes/developer/images/logo-footer.png" alt="Okta">
                    Visit okta.com
            </div>
            <div class="Column--3 Column--medium-12 Column--xSmall-12">
                <h4>Social</h4>
                <ul class="Footer-links Footer-links--social">
                    <li><a class="Footer-links--github" target="_blank" rel="noopener noreferrer" href="http://github.com/oktadeveloper">Github</a></li>
                    <li><a class="Footer-links--twitter" target="_blank" rel="noopener noreferrer" href="http://twitter.com/OktaDev">Twitter</a></li>
                    <li><a class="Footer-links--forum" target="_blank" rel="noopener noreferrer" href="https://devforum.okta.com/">Forum</a></li>
                    <li><a class="Footer-links--rss" target="_blank" rel="noopener noreferrer" href="http://feeds.feedburner.com/OktaBlog">RSS Blog</a></li>
                </ul>
            </div>
            <div class="Column--3 Column--medium-6 Column--small-12">
                <h4>More Info</h4>
                <ul class="Footer-links">
                    <li><a target="_blank" href="https://developer.okta.com/integrate-with-okta/">Integrate with Okta</a></li>
                    <li><a href="/blog/">Blog</a></li>
                    <li><a href="/docs/platform-release-notes/platform-release-notes.html">Release Notes</a></li>
                    <li><a href="/3rd_party_notices/">3rd Party Notices</a></li>
                </ul>
            </div>
            <div class="Column--3 Column--medium-6 Column--small-12">
                <h4>Contact &amp; Legal</h4>
                <ul class="Footer-links">
                    <li><a href="/contact/">Contact Sales</a></li>
                    <li><a target="_blank" rel="noopener noreferrer" href="mailto:developers@okta.com">Contact Support</a></li>
                    <li><a href="/terms/">Terms &amp; Conditions</a></li>
                    <li><a href="/privacy/">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    <script type="text/javascript" src="/assets/master-0365dd27cf276cb2a15c0a43906ca592538204cf1ad4557547bf4e50609b411e.js"></script>
    <script type="text/javascript" src="/assets/quickstart-4d52a2048893fbcae4c6e696d07942b0e2218cb2a9abcc77167531fd56645117.js"></script>
    <!-- END Footer -->
  <!-- START Post Footer -->
  <!-- START Google Tag Manager -->
  <!-- https://support.google.com/tagmanager/answer/6103696?hl=en -->
  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TJ45R6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- END Google Tag Manager -->
  <!-- START Google Remarketing Tag -->
  <script type="text/javascript">
    /* <![CDATA[ */
    var google_conversion_id = 1006913831;
    var google_custom_params = window.google_tag_params;
    var google_remarketing_only = true;
    /* ]]> */
  </script>
  <div style="display:none;"><script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script></div>
  <noscript><div style="display:inline;"><img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1006913831/?value=0&amp;guid=ON&amp;script=0"></div></noscript>
  <!-- END Google Remarketing Tag -->
  <!-- START Crazy Egg Tracking -->
  <script type="text/javascript">
    setTimeout(function(){var a=document.createElement("script");
    var b=document.getElementsByTagName("script")[0];
    a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/0021/9333.js?"+Math.floor(new Date().getTime()/3600000);
    a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
  </script>
  <!-- END Crazy Egg Tracking -->
  <!-- END Post Footer -->
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

okta_angular_auth_js.html

Latest commit

History

okta_angular_auth_js.html

File metadata and controls
