Add Authentication and Personalization to VuePress

Developer Blog Comments
1

Add Authentication and Personalization to VuePress

Learn how to create a VuePress web site, plus add authentication and personalization!

2

Chris Davis

Hi David, thanks for the article! I’ve been trying to get this working, but while the login redirect seems to work, when I’m directed back to the site the Login link is not updated. In Chrome’s developer console I can see the following error:

[Vue warn]: Unknown custom element: <authcallback> - did you register the component correctly?

Have you seen this before?

3

Karsten Rabe

I had a similar problem with the <loginlink/> component. Did you make sure to import & export it properly?

4

Karsten Rabe

Everything works fine when running npm run start, but as soon as I try to build I get an error:

wait Rendering static HTML…
Rendering page: /error Error rendering /: false
undefined
ReferenceError: window is not defined
at Object.<anonymous> (node_modules/@okta/okta-vue/dist/okta-vue.js:1:222)

5

Jordi Riera

Same issue here.
Did you find a fix?

6

David Neal

Hi @disqus_9B2tjZchIW,

The Vue components are case-sensitive. If the component is defined as AuthCallback, the tag in the .md file must match. In this example it would be <authcallback/>. Hope this helps!

7

David Neal

Hi @karstenrabe,

Unfortunately, the build error is an outstanding issue with the Okta JS SDK. You may want to register you are experiencing the same issue here https://github.com/okta/okt…

8

David Neal

Hi @disqus_nKb2PmbQM4,

The Vue components are case-sensitive. If the component is defined as AuthCallback, the tag in the .md file must match. In this example it would be <authcallback/>. Hope this helps!

9

Jordi Riera

Awesome ! Thank you. It works now.
By the way, I followed the tutorial step by step and to make it work I had to change 2 things:
* in implicit/callback/index.md: AuthCallback → authcallback
* in enhanceApp.js: import {oktaConfig} from ‘./oktaConfig’; → import {oktaConfig} from ‘…/oktaConfig’;
Devil is in the details, indeed.

I would have one more question to you @reverentgeek ,
How do you force login for a give page ?
Let’s say I have home page and super secret page. Homepage should be public, but super secret page should required a login. How would you do so ?

Thank you!

10

David Neal

Hi @disqus_nKb2PmbQM4,

There are several ways you could do this. The most simple (but less secure) way is to check the this.$auth.isAuthenticated() and redirect the user. However, since VuePress itself is a static site, the content you’re trying to protect is there (even if hidden) and anyone clever enough could disable JavaScript and still get to the content by viewing the page source.

The better solution would be to have the content behind a secure API, redirect if the user is not logged in, and after logging in use the current user’s authentication token to dynamically fetch that content from the API.

Hope this helps!
David

11

Karsten Rabe

UPDATE: https://github.com/okta/okt…

12

Karsten Rabe

Thank you for the feedback. I got a prompt reply from Brett Ritter which enlightened me.

13

Alex Weggs

Hi David, thanks for this big help ! I’m a bit stuck, when i chose implicit method grant type i have to chose token or id token. Even if i chose one of theme i’ve got those errors in my vuepress login route :

If i choose token

"OAuthError: The response type is not supported by the authorization server. Configured response types: [token]."

If i choose id token :

"AuthSdkError: Unable to parse a token from the url"

If i choose both :

"AuthSdkError: Unable to parse a token from the url"

Hope you can help with that one !

14

James Ricketts

Hi, thanks for this article. I have implemented the authentication on my vuepress site as described, but now I want to restrict access to all the pages unless the user is logged in/authenticated. How could I do this?
Thanks
James

15

AhmedNasir

@disqus_ZwbEG8MwgI i’m also looking for the same, were you able to figure out how it can be done ?