Octa Vue.js signin (Customizable Version)does not show a customizable registration page

Hello, I am a newbe to Okta and vue.js

At the moment I want to use the sign in widget to customize a new signin. The login mechanism works fine, because it is based on the example of your GITHUB application okta/ samples-js-vue the customized version.

We have now the usecase to add a customized registration form, too. I know that somehow this is also possible. So I added in the Login.vue file the following:

      // NEW BY MS FROM HERE...
      // Changes to widget functionality
      features: {
        registration: true,                 // Enable self-service registration flow
        rememberMe: true,                   // Setting to false will remove the checkbox to save username
        // multiOptionalFactorEnroll: true,  // Allow users to enroll in multiple optional factors before finishing the authentication flow.
        // selfServiceUnlock: true,          // Will enable unlock in addition to forgotten password
        // smsRecovery: true,                // Enable SMS-based account recovery
        // callRecovery: true,               // Enable voice call-based account recovery
        router: true                       // Leave this set to true for the API demo
      },
      // NEW BY MS TO HERE...

the switch registration: true leads to the fact, that a nice link is shown on the login page.
But when clicking on the link, I don’t see a customizeable registration form, i just see that i am redirected to http://localhost:8081/signin/register with a logo but no content here.

What must i now do to show a customizable registration form?

Thanks many for your help in advance

show up the complete code

This is my index.js from subdir router:

/*!

  • Copyright © 2018, Okta, Inc. and/or its affiliates. All rights reserved.
  • The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the “License.”)
  • You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
  • Unless required by applicable law or agreed to in writing, software
  • distributed under the License is distributed on an “AS IS” BASIS, WITHOUT
  • WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  • See the License for the specific language governing permissions and limitations under the License.
    */

import Vue from ‘vue’
import Router from ‘vue-router’
import ‘semantic-ui-css/semantic.min.css’

import Auth from ‘@okta/okta-vue’

import HomeComponent from ‘@/components/Home’
import LoginComponent from ‘@/components/Login’
import ProfileComponent from ‘@/components/Profile’
import MessagesComponent from ‘@/components/Messages’

import sampleConfig from ‘@/config’

Vue.use(Router)
Vue.use(Auth, sampleConfig.oidc)

const router = new Router({
mode: ‘history’,
routes: [
{
path: ‘/’,
component: HomeComponent
},
{
path: ‘/login’,
component: LoginComponent
},
{
path: ‘/implicit/callback’,
component: Auth.handleCallback()
},
{
path: ‘/profile’,
component: ProfileComponent,
meta: {
requiresAuth: true
}
},
{
path: ‘/messages’,
component: MessagesComponent,
meta: {
requiresAuth: true
}
}
]
})

const onAuthRequired = async (from, to, next) => {
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


This is my Login.vue component at the moment:

/*!

  • Copyright © 2018, Okta, Inc. and/or its affiliates. All rights reserved.
  • The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the “License.”)
  • You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
  • Unless required by applicable law or agreed to in writing, software
  • distributed under the License is distributed on an “AS IS” BASIS, WITHOUT
  • WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  • See the License for the specific language governing permissions and limitations under the License.
    */

I assume the following:

  1. I need to add a route to the registration form (which i have not done already)
  2. I need to become a member of the Beta Programm of Okta, because it says in the documentation of the widget:

Beta feature: The registration feature is currently a Beta feature. This widget functionality won’t work unless your Okta organization is part of the Beta program. For help, contact support@okta.com.

your code isn’t formatted and a bit hard to read. however to see the signup page you’ll have to install vue widget. And add features: { registration: true } at the config section of the login

Yes I have done all that. The question i had initially was, that the customizable registration page is not shown. Can give me an example, what i must do, if the user clicks the link registration? Because the use case for my company is to set up a customized registration page, too!

follow this link https://github.com/okta/samples-js-vue/blob/master/custom-login/src/components/Login.vue and add features: { registration: true } at the config section.
e.g
* `baseUrl: sampleConfig.oidc.issuer.split(’/oauth2’)[0],

  •             clientId: sampleConfig.oidc.clientId,
    
  •             redirectUri: sampleConfig.oidc.redirectUri,
    
  •             logo: require('@/assets/logo.png'),
    
  •             i18n: {
    
  •               en: {
    
  •                 'primaryauth.title': 'Sign in to Vue & Company'
    
  •               }
    
  •             },
    
  •           **features: {registration: true },**
    
  •             authParams: {
    
  •               pkce: true,
    
  •               issuer: sampleConfig.oidc.issuer,
    
  •               display: 'page',
    
  •               scopes: sampleConfig.oidc.scopes
    
  •             }`
    

Notice where i added the features

This is my Login.vue component - it is nearly based on the

GITHUB Example samples-js-vue/custom-login

<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'

  import sampleConfig from '../config'

  export default {
    name: 'Login',
    mounted: function () {
      this.$nextTick(function () {
        this.widget = new OktaSignIn({
          baseUrl: sampleConfig.oidc.issuer.split('/oauth2')[0],
          clientId: sampleConfig.oidc.clientId,
          redirectUri: sampleConfig.oidc.redirectUri,
          brandName: 'AktienAlarm',
          username: '',
          password: '',
          logo: require('@/assets/aktienalarm.png'),
          i18n: {
            en: {
              'primaryauth.title': 'Sign in to Vue & Company'
            }
          },
          features: {
            registration: true,        
            rememberMe: true,    
            router: true                 
          },
          authParams: {
            pkce: true,
            issuer: sampleConfig.oidc.issuer,
            display: 'page',
            scopes: sampleConfig.oidc.scopes
          }
        })

        this.widget.renderEl(
          { el: '#okta-signin-container' },
          () => {
            //
            // In this flow, the success handler will not be called because we redirect
            // to the Okta org for the authentication workflow.
            //
          },
          (err) => {
            throw err
          }
        )
      })
    },
    destroyed () {
      // Remove the widget from the DOM on path change
      this.widget.remove()
    }
  }

</script>

please remove the comments and reformat you code

1 Like

Sorry for that, chairmo, i reformatted the code

Here is my package.json:

{
  "name": "@okta/samples-js-vue",
  "version": "0.1.0",
  "description": "Vue Sample Applications for Okta",
  "scripts": {
    "lint": "npm run --prefix okta-hosted-login/ lint && npm run --prefix custom-login/ lint",
    "test": "npm run lint && npm run test:e2e",
    "okta-hosted-login-server": "npm start --prefix okta-hosted-login/",
    "test:okta-hosted-login": "export TEST_TYPE=implicit || setx TEST_TYPE \"implicit\" && protractor okta-oidc-tck/e2e-tests/okta-hosted-login/conf.js",
    "custom-login-server": "npm start --prefix custom-login/",
    "test:custom-login": "export TEST_TYPE=implicit || setx TEST_TYPE \"implicit\" && protractor okta-oidc-tck/e2e-tests/custom-login/conf.js",
    "preresource-server": "npm run setup-env",
    "resource-server": "node samples-nodejs-express-4/resource-server/server.js",
    "test:e2e": "npm run test:okta-hosted-login && npm run test:custom-login",
    "pretest": "node ./scripts/update-se-drivers.js && npm run setup-env",
    "pretest-legacy": "npm run webdriver-update-legacy && npm run setup-env",
    "postinstall": "npm run install-custom-login && npm run install-okta-hosted-login",
    "setup-env": "node scripts/setup-env.js",
    "install-custom-login": "cd custom-login && npm install --allow-root",
    "install-okta-hosted-login": "cd okta-hosted-login && npm install",
    "webdriver-update-legacy": "webdriver-manager update --versions.standalone=3.141.59 --versions.chrome 2.45 --gecko false"
  },
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/okta/samples-js-vue.git"
  },
  "bugs": "https://github.com/okta/samples-js-vue/issues",
  "homepage": "https://github.com/okta/samples-js-vue",
  "devDependencies": {
    "axios": "^0.19.0",
    "dotenv": "^5.0.1",
    "eslint": "^4.13.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-vue": "^4.2.0",
    "find-process": "^1.1.0",
    "forever-monitor": "^1.7.1",
    "jasmine-reporters": "^2.2.0",
    "platform": "^1.3.5",
    "protractor": "^5.4",
    "wait-on": "^2.0.2"
  },
  "bin": {},
  "private": true
}

Your code looks okay, try putting the features below the authParams and remove router from there also let’s see

I did that, and i have the same behaviour. The registration link appears, BUT the customizable registration page is not shown.

Do I need to setup a special route for the registration in \router\index.js ?
Or is there something wrong with the version? Because in the documentation it is pointed out that sometimes you need to set a clientId in config and sometimes not, it depends of the version…

have you enabled the self service registration on okta dashboard?

2 Likes

I ll check that, one second

chairmo, you helped me a lot - i activated it and now it works !!

Many Thanks for your help, now i can demonstrate my prototype!!! :grinning: :grinning: :wink: :wink:

1 Like

@mschrom glad you are able to fix it

2 Likes

Not without your support many thanks, for this!!

1 Like