Can you provide me new updated vue documentation

Questions
1

Hi,
I am tring to create login process for my brand new SPA on okta and documentation provided on github is not working, can you please provide me any other helpfull document, i want to use sing in widget to customize also.

with regards,

2

https://developer.okta.com/code/vue/okta_vue_sign-in_widget/

3

Thank you for the reference.
Issues occurred during compiling:
it asked me to install “npm install --save @okta/okta-auth-js” and i did as re run the server.
warning i received:

C:\Users\sahithpixels\PycharmProjects\client\src\components\Login.vue
  14:20  warning  Unexpected unnamed function  func-names

Result:
After running the server with on warning, Nothing came up on the screen. its just a blank white screen.

when i inspected network tab on webpage, I see call got stuck at websocket with status 101, saying request is not a finished.

Screenshot 2021-02-01 111900
Screenshot 2021-02-01 1119003825×2035 107 KB

My App.vue:

    <template>
      <div id="app">
        <nav>
          <div>
            <router-link to="/">
              Okta-Vue Sample Project
            </router-link>
            <router-link to="/login" v-if="!authenticated">
              Login
            </router-link>
            <router-link to="/profile" v-if="authenticated" >
              Profile
            </router-link>
            <router-link to="/" v-if="authenticated" v-on:click.native="logout()">
              Logout
            </router-link>
          </div>
        </nav>
        <div id="content">
          <router-view/>
        </div>
      </div>
    </template>

    <script>
    export default {
      name: 'app',
      data() {
        return { authenticated: false };
      },
      created() {
        this.isAuthenticated();
        this.$auth.authStateManager.subscribe(this.isAuthenticated);
      },
      watch: {
        // Everytime the route changes, check for auth status
        $route: 'isAuthenticated',
      },
      methods: {
        async isAuthenticated() {
          this.authenticated = await this.$auth.isAuthenticated();
        },
        async logout() {
          await this.$auth.signOut();
          await this.isAuthenticated();
        },
      },
    };
    </script>

<style>
nav div a { margin-right: 10px }
</style>

My Index.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Auth from '@okta/okta-vue';
// eslint-disable-next-line import/no-unresolved
import { OktaAuth } from '@okta/okta-auth-js';
// eslint-disable-next-line import/extensions
import HomeComponent from '@/components/Home.vue';
// eslint-disable-next-line import/extensions
import LoginComponent from '@/components/Login';
// eslint-disable-next-line import/extensions
import ProfileComponent from '@/components/Profile';

Vue.use(VueRouter);

const oktaAuth = new OktaAuth({
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  clientId: '{clientId}',
  redirectUri: `${window.location.origin}/login/callback`,
  scopes: ['openid', 'profile', 'email'],
});
Vue.use(Auth, { oktaAuth });

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: HomeComponent,
    },
    {
      path: '/login',
      component: LoginComponent,
    },
    {
      path: '/login/callback',
      component: Auth.handleCallback(),
    },
    {
      path: '/profile',
      component: ProfileComponent,
      meta: {
        requiresAuth: true,
      },
    },
  ],
});

const onAuthRequired = async (from, to, next) => {
  // eslint-disable-next-line max-len
  if (from.matched.some((record) => record.meta.requiresAuth) && !(await Vue.prototype.$auth.isAuthenticated())) {
    // Navigate to custom login page
    next({ path: '/login' });
  } else {
    next();
  }
};

router.beforeEach(onAuthRequired);

export default router;

My Login.vue

<template>
  <div class="login">
    <div id="okta-signin-container"></div>
  </div>
</template>

<script>
import OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';

export default {
  name: 'Login',
  mounted() {
    this.$nextTick(function () {
      this.widget = new OktaSignIn({
        baseUrl: 'https://dev-730466.okta.com',
        clientId: '0oa213zmmnjvPkYXI4x7',
        redirectUri: 'http://localhost:8080/login/callback',
        authParams: {
          pkce: true,
          issuer: 'https://dev-730466.okta.com/oauth2/default',
          display: 'page',
          scopes: ['openid', 'profile', 'email'],
        },
      });
      this.widget.showSignInAndRedirect(
        { el: '#okta-signin-container' },
      );
    });
  },
  destroyed() {
    // Remove the widget from the DOM on path change
    this.widget.remove();
  },
};
</script>
4

Did you use the same versions that are specified at the top of that page? If you don’t, there’s no guarantee that it works.

This guide is for @okta/okta-signin-widget v5.2.0, @okta/okta-vue v3.0.0 and okta-auth-js v4.5.0.

This means that instead of npm install @okta/okta-signin-widget, you need to use npm install @okta/okta-signin-widget@5.2.0.

Also, if you find it doesn’t work without specifying versions, please enter an issue in the Okta Vue project on GitHub. You could also try using our Vue Samples.

5

Thanks for the versions, I tried with the specified versions and it is same, i dont get anything, no network proof app is reaching okta.

6

Can you please enter an issue in the Okta Vue project describing your issue and how to reproduce it? If our docs don’t work, we should fix them.

7

Sure, I am working on it.
Thank you,

8

@venkat Documentation for creating Vue app has been updated. Can you please follow the updated guide and share your result?