I recently built a Vue.js application with Okta authentication. I am attempting to deploy this application on Netlify. After setting up a new project in Netlify, I imported the Vue.js application into the Netlify project from GitHub. I reconfigured the router in the application so that redirect_uri in the Okta initializer reflects the new Netlify URL:
import Auth from "#okta/okta-vue";
Vue.use(Auth, {
issuer: "https://xxx-xxxxxx.okta.com/oauth2/default",
client_id: "xxxxxxxxxxxxxxxxxxxx",
redirect_uri: "https://xxxxxxxxx-xxxx-xxxxxx.netlify.com/implicit/callback",
scope: "openid profile email"
});
After deploying the application and clicking the login button, I should be redirected to the default Okta login page. However, I am instead redirected to a page that says "page not found: Looks like you've followed a broken link or entered a URL that doesn't exist on this site."
I even made sure to whitelist that URL in my Okta dashboard. Any idea why Netlify doesn't recognize the new redirect_uri? Thanks!
Since you're deploying a SPA, you need to route all routes to your index.html and let Vue handle them.
According to this article, you need to add a _redirects file to your publish directory with the following line to take advantage of browser history pushstate:
/* /index.html 200
For more info, see Netlify's docs.
I solved the CORS issue. In the Okta Dashboard, I added the redirecting URL as an original URL under API > Trusted Origins. I selected Add Origin to specify the base URL of the website, then selected CORS. See : https://support.okta.com/help/s/article/CORS-error-when-accessing-Okta-APIs-from-front-end
Related
I am trying to implement social login using keycloak in a react-native application and upon following official keycloak documentation I have hit a dead end.
I have correctly configured (according to documentation) the correct redirect URI.
Details-
1.created a new facebook app. Now I have two different web resources.
a.) An instance running keycloak server on a docker setup.
b.) A dummy web app on a different domain that I am redirecting to using my react native code. I am using react-native-login package and the configuration which goes into their Login.start(config) method is attached below.
2.The website uri is the facebook app setting is same as the redirect uri that keycloak provides upon adding an identity provider.I have double checked my app id and app secret
and switched the app to production by giving it a privacy policy on the dummy express aplication I am trying to redirect to.
3.The keycloak server and the dummmy express app I have are on different domains (I don't see any problems with this but the tutorial I was following had the website and the keycloak server on the same domain with different sub domains could this be the problem).
The error
{
"error": {
"message": "Can't load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings.",
"type": "OAuthException",
"code": 191,
"fbtrace_id": "Awr-3dCV3zr"
}
}
config object
const config = {
url: "https://authserver.ml/auth",
realm: "Demorealm",
client_id: "demoFrontEnd",
redirect_uri: "https://dummyapp.ml/privacypolicy",
appsite_uri: "https://dummyapp.ml",
kc_idp_hint: "facebook",
};
website URI in facebook = redirect uri by keycloak (according to keycloak documentation)
added both the domains in the domains section of facebook app settings under the basic tab.
In the Share Redirect Domain Allow List section in advanced settings in facebook app I have added both the URI's ie. the authentication broker url from keycloak and the uri I am trying to redirect to after a successful login but I get this error everytime
Another scenario I have noticed is when I try to give the react-native-login config object a redirection uri that is mentioned in keycloak I get the invalid parameter error from keycloak
NOte- the error is arising from facebook's graph api which means that the authentication request went past the keycloak server and to facebook (https://graph.facebook.com/oauth/authorize?scope=email&state=rest of the url)
Any suggestions at this point will be much appreciated.
I am want to build an app which has a static frontend ( target: 'static' in nuxt.config.js ), and a backend using ktor. The app will need to authenticate users but I do not want to manage passwords and things myself, so I would like to integrate with AWS Cognito. Based on my understanding, I think this is the workflow I want:
User is browsing the site anonymously (no login)
They do some action which requires login or explicitly click on login button.
User gets redirected to AWS Cognito ui for login. They may register for new account, login with their existing, or login using another provider (after configuring cognito for it).
Cognito ui redirects user back to the app ui but with JWT tokens in query params (I think this is just how cognito does it)
The JWT token (s?) get stored in vuex store / nuxt auth
The token is used when making requests to the backend. As well as showing some additional components / actions if the user is authenticated and their basic info like username (part of jwt?)
I think I have cognito and the ktor backend setup correctly but I don't know how to get started for the frontend.
The nuxt auth module guide says to set up middleware, but afaik middleware is only for server side rendered apps.
I need to activate the vuex store but I don't know what to put there. Are there some specific things the auth module expects or do I just create an empty file in the directory?
How do I tell it when to redirect or read the token from query param?
How to parse the JWT token (if it doesn't automatically) and get some payload info like username from it?
Does the axios module get configured automatically to make use of this?
I found this old github issue 195 in the auth module repo, but I believe that's for when the "login form"/ui is part of the nuxt app and client is making use of the cognito api without 'redirect'.
Unfortunately everything in this stack is new for me so any help is appreciated. If there is already a project doing something similar, I look at the code and try to figure it out but right now I'm lost.
update 2020-12-31, mainly so that I can put a bounty on this soon: The live demo at https://auth0.nuxtjs.org/ seems to be doing what i'm looking for but then the github page read me shows something else https://github.com/nuxt/example-auth0. Also i don't see middleware / plugins used anywhere. it's all mostly configured through nuxt config, so it only works for the auth0 custom provider?
I was having the same issue as you:
How do I tell it when to redirect or read the token from query param?
I solved this by configuring auth.redirect.callback to match the endpoint that cognito will callback with the token. I believe this will tell the middleware when to look for a new token in the query param.
nuxt.config.js:
auth: {
redirect: {
callback: '/signin',
...
},
strategies: {
awsCognito: {
redirectUri: "http://localhost:8080/signin",
...
}
}
}
And to answer your other questions:
The nuxt auth module guide says to set up middleware, but afaik middleware is only for server side rendered apps.
I tried this setup with ssr: false and it still works fine.
I need to activate the vuex store but I don't know what to put there. Are there some specific things the auth module expects or do I just create an empty file in the directory?
An empty index.js file is fine.
How do I tell it when to redirect or read the token from query param?
See first answer above.
How to parse the JWT token (if it doesn't automatically) and get some payload info like username from it?
From my initial testing I found that the middleware will automatically call the userInfo endpoint when user data is requested e.g. this.$auth.user.email
strategies: {
awsCognito: {
scheme: "oauth2",
endpoints: {
userInfo: "https://x.amazoncognito.com/oauth2/userInfo",
ref: https://docs.aws.amazon.com/cognito/latest/developerguide/userinfo-endpoint.html
Does the axios module get configured automatically to make use of this?
Yes.
I am using AUTH0 V9 API to host the login page on my website and use API to login user via AUTH0. I am using https://auth0.com/docs/libraries/auth0js document as a reference. I installed the auth0-js npm package via the following command
npm install auth0-js
Then initialized the AUTH0 via the following code
<script type="text/javascript">
var webAuth = new auth0.WebAuth({
domain: 'YOUR_DOMAIN',
clientID: 'YOUR_CLIENT_ID'
redirectUri: "http://localhost:3000/login",
responseType: "code",
responseMode: "form_post",
scope: "openid profile email",
});
</script>
Then I using login() method as following
webAuth.login({
realm: 'tests',
username: 'testuser',
password: 'testpass',
});
But this above login code is not working. It's redirecting me to some other URL and not to "http://localhost:3000/login" which I provided while initializing AUTH0 object.
This method also has a reference to "Custom Domain". Do I need to purchase AUTH0 subscription for managing V9 API or I am doing something wrong that's why I am getting the wrong redirect. Please help.
========
Some strange thing I discovered that the same code is working with my personal account but not with my client's business account.
The same code mentioned above worked with my personal account but not with my client's business account and the problem was that client had set up custom error pages in the tenant settings. Whosoever is working with custom login, please check out two things.
Your callback URL is exactly what you are mentioning in your custom login code via AUTH0 V9.
Custom error pages are off in the tenant settings. "Tenant settings -> General Pages -> Error".
I'm trying to use the #nuxtjs/auth module for OAuth2 authentication from Okta in a web app.
My app has a URL structure like: /browse/{folder} to view images from a particular folder, where {folder} can be any string of text. This is accomplished by creating a top-level view called browse.vue, a folder called browse, and a child component within that folder called _folder.vue. See more on nested routes in the Nuxt.js documentation in more detail here.
I've added the auth guard to the _folder.vue file. When I navigate to /browse, I'm redirected to /login and everything works perfectly from here with OAuth2 and Okta. When I'm returned to the app after logging in, I'm taken back to the /browse page.
However, when I navigate to a folder, like /browse/Test, I'm not redirected back to that folder after logging in. Instead, I'm returned to the / view of the app. From here, if I type the path in the address bar again, I am able to successfully view it as a logged in user. This indicates that the login was successful, but something about the redirect wasn't.
I noticed by looking at the cookies in the Firefox developer tools that an auth.redirect cookie is not created when I navigate to /browse/Test, so I think the auth module is not aware of where to redirect the user after logging in. When I navigate to /browse, the auth.redirect cookie is created, and the redirect occurs successfully.
Is there something I can do to make the auth module work for redirecting to these dynamic routes, or is this a bug with the module? Everything else about the module has worked perfectly in my app.
My auth configuration in nuxt.config.js, using #nuxtjs/auth version 4.9.1:
auth: {
fullPathRedirect:true,
redirect:{
callback:"/login",
logout:"/"
},
strategies: {
social:{
_scheme: 'oauth2',
authorization_endpoint: "https://{my-subdomain}.okta.com/oauth2/v1/authorize",
scope: ['openid', 'profile', 'email'],
access_token_endpoint: "https://{my-subdomain}.okta.com/oauth2/v1/token",
response_type: 'id_token',
token_type: 'Bearer',
client_id: process.env.CLIENT_ID,
client_secret:process.env.CLIENT_SECRET,
token_key: 'id_token'
}
}
}
I tried to sign in to Auth0 with the new package (https://github.com/auth0/auth0-spa-js).
Attempt 1: I did try a best practice that uses cy.request() but seem like new the auth0-spa-js package now requires a random state string (which I don't have and it was generated from loginWithRedirect function) in the request URL. So I can not call sign in API of Auth0
Attempt 2: I set "chromeWebSecurity": false, I click sign in button -> my web is redirected to Auth0 page, the URL is load correctly but Auth0 refused to display 'auth0 url' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".
Does you guy have any solution for this situation?
For now, this is the workaround solution of me.
Disable chrome security in Cypress config.
Login through the auth0 page (we will redirect to log-in page and log out due to the fact that I cannot generate the random state in the new auth0 package: auth0-spa-js)
Note: If you’re not custom login page in auth0, use the classic page in Universal Login. I found that the new UI of Auth0 login page has a lot of security enhance that prevents us render auth0 in an iframe. (like image below)
Auth0 seting
Then, Go to Auth0 -> Tenant Setting -> Advanced -> Enable Clickjacking Protection to allow auth0 load in an iframe.
Enalbe Clickjacking
Ok, that all the step that I did to make it work. Hope this help you