I am trying to run a self hosted instance of supabase with an oauth connection to keycloak.
When i test the login my url becomes
http://localhost:3004/?error=server_error&error_description=Unable+to+exchange+external+code%3A+2e9950ce-e003-40e4-9c78-27a9a92c45dd.52212bf2-f8b9-4a9e-ac7d-9805b0d79ba6.d8862f10-3dc5-4670-b97e-fd6bccd0b307
My Keycloak client redirect url
http://localhost:8000/auth/v1/callback
I also added the following code to my docker compose file
GOTRUE_EXTERNAL_KEYCLOAK_ENABLED: true
GOTRUE_EXTERNAL_KEYCLOAK_CLIENT_ID: supabase
GOTRUE_EXTERNAL_KEYCLOAK_SECRET: <Secret>
GOTRUE_EXTERNAL_KEYCLOAK_REDIRECT_URI: http://localhost:8000/auth/v1/callback
GOTRUE_EXTERNAL_KEYCLOAK_URL: http://172.20.150.149:8181/realms/Dev
I am using NextJS to create the app.
Related
I have set up Keycloak locally successfully (localhost). However, since I was using ngrok I changed authServerUrl and authUrl in the Admin console (realm settings) to the ngrok URL. The ngrok URL has now changed and I cannot access the Keycloak admin console because it's trying the open the old ngrok URL for the Admin page.
Is there a folder, xml or json file where I can adjust the authServerUrl and authUrl for Keycloak locally?
I was able to edit/correct the authServerUrl and authUrl via CLI. The property is called frontendUrl in the realm JSON file.
In case anyone comes across the same here is the command:
./kcadm.sh update realms/master -s attributes.frontendUrl=http://localhost:8080/auth
Im running my nextjs (UI only) application on localhost http://localhost:3000/, this localhost has to connect to BE API (another hosted service) say https://test-api/api/graphql. This API is called from FE on path http://localhost:3000/api/graphql which connect to https://test-api/api/graphql with the help of nextjs rewrite function
async rewrites() {
const rewrites = [];
rewrites.push({
source: "/api/graphql",
destination: "https://test-api/api/graphql",
});
return rewrites;
},
Now looks like my BE api https://test-api/api/graphql is doing a force direct for path http://localhost:3000/api/graphql to https://localhost/api/graphql
And now since https://localhost/api/graphql is not existing, I'm unable to connect to the BE API. Any idea what can i do in nextjs config so that even if redirect is happening I'm still able to connect to my BE API
Facing this issue only on local environment, hosted nextjs application is not having this issue as it is already on https
I am setting up a community website with a Strapi CMS backend and a NuxtJS frontend using the composition API.
Besides the normal registration and login using email and username (which works!), I want users to be able to login using GitHub.
I am using #nuxtjs/auth module for authorization.
I've "deployed" my Strapi backend using ngrok. This is needed apparently to make OAuth work.
I've set up my GitHub application, using <ngrok-url>/connect/github/callback as the callback.
I've set the GitHub client_id and secret in my .env file.
In the strategies in my nuxt.config.js file I have this:
github: {
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET,
},
I've added a line in config/server.js of the Strapi backend:
url: '<ngrok url>'
So the backend is fired up in that location.
In my Strapi configuration, I've enabled a GitHub provider, and I need a redirect url to my frontend there. I am not sure what to put here.
I've tried: http://localhost:3000 (my Nuxt app port), but then I get a redirect uri mismatch error ("the redirect uri must match the registered callback"), when I try to access it from the frontend (using nuxt-auth's loginWith('github)').
More info on this here, but I don't get what they are saying.
Provide a redirect_uri where?
And they say to have a redirect_uri that matches what you registered. That matches what exactly?
The nuxt-auth docs are not that elaborate, saying to use $auth.loginWith('github') and that's it. I do this in my frontend, but I'm not sure if that is all I should do.
I can go manually to "<ngrok-url>/connect/github" (in ingognito) and login there in GitHub and I get redirected to the url I put in Strapi, with the access token as a parameter. So that part seems to work.
My main 2 question are:
How do I make the correct call from the frontend to the right endpoint to login through GitHub?
How do I process the result of that call?
Any help is much appreciated!
Update #1
I added a property redirectUrl on the github strategy in nuxt.config.js with the <ngrok-url>/connect/github/callback. That fixes a redirecting issue from GitHub.
I also added a redirect in Strapi to localhost:3000/connect/github and added a page in nuxt following this solution.
Now, I get back a jwt token and a user from Strapi, but $auth.loggedIn is still false in my front end. I'll try to fix this by writing my own middleware. I think this is needed because the app is server-side rendered.
The issue was that loginWith('github') connects nuxt directly to github. But we want to go to Strapi first. So in the end, I removed all the github-related info in my frontend and made a regular <a> with href to <strapi-url>/connect/github and then handled the response in a vue page like so:
data() {
return {
provider: this.$route.params.provider,
access_token: this.$route.query.access_token,
}
},
async mounted() {
const res = await this.$axios.$get(
`/auth/github/callback?access_token=${this.access_token}`,
)
const { jwt, user } = res
await this.$auth.setUserToken(jwt)
this.$auth.setUser(user)
this.$router.push(`/`)
},
To test it locally, I used ngrok to fire up the backend in a tunnel, instead of localhost.
If you want to look at more code, check out my PR here
Setup:
We have a HTTPS strapi application and keycloak is configured as an identity provider with the corresponding client id and secret from the keycloak client. Both strapi and keycloak are behind nginx.
We have a keycloak server, where the strapi is added as a client with the necessary redirect URIs configured.
Also, the provider.js and bootstrap.js is setup as suggested in the reference:
Strapi Documentation,
Issue:
Strapi throws an error when trying to access the client:
{"statusCode":400,"error":"Bad Request","message":{"message":"No access_token."},"data":{"message":"No access_token."}}
https://our.website.domain/strapi/auth/keycloak/callback?error=request-compose%3A%20timeout
In the logs, we see that the access token is not received and hence the error is thrown from strapi end. example provider.js line
Verification:
Strapi is able to use other social identity providers like GitHub to authenticate as expected.
We are able to use Postman to get the access token from keycloak by posting to https://our.website.domain/auth/realms/exampleRealmName/protocol/openid-connect/token as suggested in this comment (step1).
We are able to use the access token to get response from Strapi through Postman. https://our.website.domain/connect/IDP-Name/callback as suggested here (step 2)
Any inputs or advise on what could be the issue?
Thank you in advance.
I have windows console application that needs to interact with GitHub API using octokit.net. The first step is to register application with GitHub. On the registration page i have to provide Homepage Url and Authorization callback Url
For console application what would be the values for these two fields? I really dont want to connect GitHub using userid, password