I have deployed a vuejs app on github-pages with okta authentication. On localhost (locally) when I click on a login button on my vuejs page it goes to Okta for authentication and then redirects to my localhost successfully.
Now I have deployed to github-pages and the redirection from Okta back to my github-pages does not work. I keep seeing the following error:
GET https://<MYUSERNAME>.github.io/vue-catalog-ui/implicit/callback?code=<REDACTED>&state=<REDACTED> 404
I guess Okta redirection does not work on Github-pages because locally I do this to run npm run serve which may do something additional like setting up a server?
The following is my Auth setup in my main.js file:
//const vueUrl = "http://localhost:8080"
const vueUrl = 'https://<MYUSERNAME>.github.io/vue-catalog-ui'
Vue.use(VueRouter)
console.log('issuer: ', process.env)
Vue.use(Auth, {
issuer: 'https://dev-<REDACTED>.okta.com/oauth2/default',
clientId: '<REDACTED>',
redirectUri: vueUrl + '/implicit/callback', // Handle the response from Okta and store the returned tokens.
scopes: ['openid', 'profile', 'email'],
pkce: true
})
vue.config.js:
publicPath: '/vue-catalog-ui/'
Any hints appreciated.
Related
I have a setup with nuxt and keycloak as auth strategy which in general is working. I can login via keycloak and then will have this.$auth.loggedIn === true on the page. When navigating via vue-router, this.$auth.loggedIn will also be true when switching to a new page.
But when I then reload the page (CMD+r/F5), server side rendering will have false for this.$auth.loggedIn, while on client side it will be true. This forced me to do a lot of <client-only> blocks in the templates to prevent ssr mismatches.
I wonder if it is possible that on first page load server side rendering can return a page with authorized content? I would think this should be possible since cookies with auth info are set and sent to the server.
Or is that never possible and efficient server side rendering can only be used for non-authorized content?
Versions:
nuxt: 2.15.8
#nuxtjs/auth-next: 5.0.0-1643791578.532b3d6
nuxt.config.js:
auth: {
strategies: {
keycloak: {
scheme: 'oauth2',
endpoints: {
authorization: `${ process.env.KEYCLOAK }/protocol/openid-connect/auth`,
userInfo: `${ process.env.KEYCLOAK }/protocol/openid-connect/userinfo`,
token: `${ process.env.KEYCLOAK }/protocol/openid-connect/token`,
logout: `${ process.env.KEYCLOAK }/protocol/openid-connect/logout`,
},
token: {
property: 'access_token',
type: 'Bearer',
maxAge: 1800,
},
refreshToken: {
property: 'refresh_token',
maxAge: 60 * 60 * 24 * 30,
},
responseType: 'code',
grantType: 'authorization_code',
clientId: process.env.CLIENT_ID,
scope: ['openid', 'profile', 'email', 'roles'],
codeChallengeMethod: 'S256',
redirect: {
logout: '/',
callback: '/',
home: '/',
},
},
},
},
Having a Vue component with this:
created() {
console.log(this.$auth.loggedIn);
},
Will return false for SSR and true on client side on page load/refresh when logged in.
After manually implementing a server side authenticator, I found out that the problem was my local docker setup.
Didn't think this was the problem before, so I forgot to mention it.
I have a local docker container with keycloak and a local docker container with nuxt.
Long story short, it seems that the nuxt server wasn't able to communicate with keycloak, hence wasn't able to fetch the user. After changing some addresses so that keycloak was available on the same address from the browser and from within my nuxt server docker container, the nuxt server did get $auth.loggedIn=true automatically on page load if the is was logged in.
Not sure if I didn't see it, but I wished nuxt auth would give me an error if the nuxt server failed to communicate with the authorization server. Would have saved me a lot of debugging.
I'm trying to follow this guide to setup testing an express API in Insomnia. I have setup a poretected route at http://localhost:5000/api/v1/private/dashboard with express-openid-connect. I have also setup an machine-to-machine application and API in auth0.
When in Insomina I try to access http://localhost:5000/api/v1/private/dashboard I am redirected to the universal login page. Trying to login does nothing. I don't think I've set this up right, but am strugging to understand the process and can't find a similar issue when searching.
I want to be able to make GET/POST/PUT/DELETE requests in Insomnia and the data be returned the same as unauthenticated routes.
I have tried various configuration changes including using client credentials, in body, using a different app type but I don't really understand auth0's configuration so don't know what I'm doing.
server.js (where the authenication check is called via oidc)
import express from "express";
import oidc from "express-openid-connect";
import publicRoutes from "./routes/publicRoutes.js";
import privateRoutes from "./routes/privateRotues.js";
const app = express();
const {
auth,
requiresAuth,
} = oidc;
const config = {
authRequired: false,
auth0Logout: true,
secret: process.env.SECRET,
baseURL: process.env.BASE_URL,
clientID: process.env.CLIENT_ID,
issuerBaseURL: process.env.ISSUER_BASE_URL,
};
console.log(config);
app.use(auth(config));
app.use("/api/v1/public", publicRoutes);
app.use("/api/v1/private", requiresAuth(), privateRoutes);
app.use("*", (req, res) => res.status(404).json({error: "File not found"}));
export default app;
I am using a manual auth configuration in my react native app to add OAuth to my react native app. I have followed all of the steps outlined here for Google and Facebook.
My problem is when I click on the button I have created in the front-end that redirects me to a federated sign-in, there is an extra 'https' in the link.
In AWS Cognito User Pools, my sign in and sign out URLS are set to myapp:// and have configured my hosted UI in the AWS console. I have also set the hosted UI url to the OAuth Redirect URI's in both facebook and google for my app clients.
This is my aws configuration in react native:
export default awsConfig = {
Auth: {
"aws_project_region": "us-west-2",
identityPoolId: 'us-east-1:*******',
region: 'us-east-1',
userPoolId: '************'
userPoolWebClientId: '*************'
oauth: {
domain: "https://myapp.auth.us-east-1.amazoncognito.com",
scope: [
"email",
"openid",
],
redirectSignIn: process.env.NODE_ENV === "myapp://",
redirectSignOut: process.env.NODE_ENV === "myapp://",
responseType: "code"
},
federationTarget: "COGNITO_USER_POOLS"
}
}
In my case, the problem occurs when I click either the "Sign in with Facebook" or "Sign in with Google" buttons.
This is what comes up when I click either link:
and the whole url is https://https//aspen-dev.auth.us-east-1.amazoncognito.com/oauth2/authorize?redirect_uri=false&response_type=code&client_id=****&identity_provider=Google&scope=email%20openid&state=****&code_challenge=xQX-****&code_challenge_method=S256
As you can see, there is an extra https, and I don't know what is causing it.
in awsConfig, I took out the 'https://' of the oauth.domain and now it is working
The problem did not happen on my side, but you may try to do
import awsconfig from './src/aws-exports';
awsconfig.oauth.domain = awsconfig.oauth.domain.substring(8)
So that you won't have to remove the leading "https://" again whenever you run amplify pull in the future.
I used redirectUrl and it's working fine in local development but when i create a Realease apk after it's not working it's redirect to google page.
const result = await Google.logInAsync({
androidClientId:'31022361841-7431bfbrm8qidpd9l7m9cldn1vd3nl65.apps.googleusercontent.com',
androidStandaloneAppClientId:'874376514949-m5f77i8pp4dub997jm664pfljle1bu9k.apps.googleusercontent.com',
redirectUrl: `${AppAuth.OAuthRedirect}:/oauthredirect`
scopes: ['profile', 'email'],
});
I explain my problem,
I have a Gcloud domain "example.appspot.com" (for example) with a website from squareSpace. I would like to add a web application in node.js on this domain without overwriting the original site.
I would like to connect the user at the web app on this link "example.appspot.com/webApp/". And if you go at "example.appspot.com" you are on the squareSpace website.
If I deploy the web application and go to "example.appspot.com", I have the web application, but the website from squareSpace is down ...
Yet my application has no "get or post" for "/", the first page is "/login".
If I go on "/" I just have "Cannot GET /"
I tried to use dispath.yaml but it don't work.
dispatch:
- url: "example.appspot.com/webApp"
service: default
Nothing change and "example.appspot.com/webApp" not work...
And i tried to use openapi-appengine.yaml.
swagger: "2.0"
info:
description: "WebApp"
title: "Title WebApp"
version: "1.0.0"
host: "example.appspot.com/webApp"
But it don't want the "/" in host.
I tried to use a handlers in app.yaml but it not work...
I don't find solution.
Do you have any idea how I can tell gcloud to use the application only on "/ webApp/" ?
I'm sorry for my bad english level, i improve it every day.
There are two ways to achieve this, depending on your scenario:
1) Express routes:
each route executes the logic you need. Node works with a module.exports/require system, so for each route you can have a different JS file that exports all due functions, used in the route's code.
Example:
server.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
const index = require('./index');
res.send(index.hello());
});
app.get('/webapp', (req, res) => {
const webapp = require('./webapp');
res.send(webapp.appFunction());
});
index.js
exports.hello = function() {
return "Hello";
}
webapp.js
exports.appFunction = function() {
return "App Function";
}
2) Service redirect: If you need a full app working at some endpoint and not some functions, then you can deploy the webapp as a distinct service within the same application, and redirect the client request to this service at a given endpoint.
For this, create and deploy your webapp service exactly as the default app from its own folder, with a dedicated package.json and app.yaml. Just specify the service name in app.yaml: service: webapp
Once deployed, your service will be available at a weblink in the form https://[SERVICE_ID]-dot-[MY_PROJECT_ID].appspot.com, which you can use to redirect from your default application's endpoint:
app.get('/webapp', (req, res) => {
res.redirect('https://[SERVICE_ID]-dot-[MY_PROJECT_ID].appspot.com');
});
More info about services and routing here. You can also manage routing with dispatch.yaml:
Example if your service ID is "webapp"
dispatch:
- url: "example.appspot.com/webApp"
service: webapp