Note: To complete this tutorial, you must have Node.js version 8 or higher installed, and a good text/code editor such as Visual Studio Code.

npm init -y

npm install [email protected]

  "scripts": {
    "build": "vuepress build .",
    "dev": "vuepress dev ."
  },

# Hello VuePress

This is going to be awesome!

npm run dev

module.exports = {
  title: "My Documentation Site",
  description: "This is going to be awesome!",
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "About", link: "/about/" }
    ]
  }
};

Create an Okta Account

1. Click on the Edit button.
2. Change Self-service registration to Enabled.
3. Click the Save button at the bottom of the form.

Add the Okta Vue Component to VuePress

npm install @okta/[email protected]

Note: If the local development server is still running, you can press CTRL+C to stop it.

export const oktaConfig = {
    issuer: "https://{yourOktaDomain}/oauth2/default",
    client_id: "{yourClientId}",
    redirect_uri: "http://localhost:8080/implicit/callback/",
    scope: "openid profile email"
};

Customize the Default VuePress Theme

npx vuepress eject .

import Auth from '@okta/okta-vue';
import {oktaConfig} from '../oktaConfig';

Vue.use(Auth, oktaConfig);

<template>
  <p>Redirecting after login...</p>
</template>

<script>
export default {
  async beforeMount() {
    // Process the auth tokens
    await this.$auth.handleAuthentication();

    // get the redirect path from local storage
    const path = this.$auth.getFromUri();

    // redirect browser to the original page
    window.location.replace( path );
  }
}
</script>

# Logging In

<AuthCallback />

<template>
  <div class="nav-item">
    <a
      v-if="authenticated"
      href="/"
      @click.stop.prevent="logout"
      class="nav-link"
    >Sign out ({{ user.name }})</a>
    <a v-else href="/" @click.stop.prevent="login" class="nav-link">Login</a>
  </div>
</template>

<script>
export default {
  created() {
    this.isAuthenticated();
  },
  data() {
    return {
      user: null,
      authenticated: false
    };
  },
  methods: {
    async isAuthenticated() {
      const authenticated = await this.$auth.isAuthenticated();
      if (authenticated) {
        this.user = await this.$auth.getUser();
      } else {
        this.user = null;
      }
      this.authenticated = authenticated;
    },
    login() {
      const currentPath = this.$router.history.current.path;
      this.$auth.loginRedirect(currentPath);
    },
    async logout() {
      await this.$auth.logout();
      await this.isAuthenticated();

      // Navigate back to home
      this.$router.push({ path: '/' });
    }
  }
};
</script>

1. In the template, add <LoginLink /> before the closing </nav> tag.
2. Add import LoginLink from './LoginLink.vue' to the list of import statements.
3. Add LoginLink to the list of components.

      {{ repoLabel }}
      <OutboundLink/>
    </a>
    <LoginLink />
  </nav>
</template>

<script>
import DropdownLink from './DropdownLink.vue'
import { resolveNavLinkItem } from './util'
import NavLink from './NavLink.vue'
import LoginLink from './LoginLink.vue'

export default {
  components: { NavLink, DropdownLink, LoginLink },

Note: If the application shows that you are already logged in, you can test the login process by clicking Sign out or by opening a new private/incognito window in your browser.

function scanChildNodes(node, results) {
  if (node.childNodes.length) {
    for (let i = 0; i < node.childNodes.length; i++) {
      scanChildNodes(node.childNodes[i], results);
    }
  } else if (node.nodeType == Node.TEXT_NODE) {
    results.push(node);
  }
}
export function getAllTextNodes() {
  const results = [];
  scanChildNodes(document, results);
  return results;
}

export function nodeReplace(nodes, token, value) {
  nodes.forEach(node => {
    node.nodeValue = node.nodeValue.replace(
      new RegExp( `\{${ token }\}`, "gi" ),
      value
    );
  });
}

import {getAllTextNodes, nodeReplace} from './tokenReplacer'

this.replaceTokens();

this.$router.afterEach(() => {
  nprogress.done();
  this.isSidebarOpen = false;
  this.replaceTokens();
});

onSWUpdated (e) {
  this.swUpdateEvent = e
},

replaceTokens() {
  this.$auth.getUser().then( user => {
    if ( user ) {
      const nodes = getAllTextNodes();
      // Look for any occurrence of {yourEmail} and replace it with user's email
      nodeReplace( nodes, "yourEmail", user.email );
    }
  });
}

# Hello VuePress

This is going to be awesome!

## Token Replacement Example

When logged in, this value will be your actual email address: `{yourEmail}`

• Build a Basic CRUD App with Vue.js and Node
• Add Identity Management to Your Vue.js App
• Add Authentication to Any Web Page in 10 Minutes
• What the Heck is OAuth?