For whatever reason I am getting "Invalid Client id" error when testing the authentication flow I set up with next-auth. Here are the steps to reproduce the error:
Setup credentials (Client id /client secret) via google.
Setup environment variables in my ".env.local" file.
error:
Error 400: invalid_request
Missing required parameter: client_id
/api/[next-auth].js file
import NextAuth from "next-auth";
import Providers from "next-auth/providers";
export default NextAuth({
// https://next-auth.js.org/configuration/providers
providers: [
Providers.Email({
server: process.env.EMAIL_SERVER,
from: process.env.EMAIL_FROM,
}),
Providers.Google({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
],
});
.env.local file:
NEXT_PUBLIC_GOOGLE_ID=MY_GOOGLE_ID
GOOGLE_SECRET=MY_GOOGLE_SECRET
Figured it out. Here is the answer:
This line:
NEXT_PUBLIC_GOOGLE_ID=MY_GOOGLE_ID
GOOGLE_SECRET=MY_GOOGLE_SECRET
Should look like this:
GOOGLE_ID=MY_GOOGLE_ID
GOOGLE_SECRET=MY_GOOGLE_SECRET
Basically, Don't prepend the "NEXT_PUBLIC_"
Related
I am trying to add user authentication with next-auth.js through firebase. I followed the documentation on how to implement a sign in system using google as a provider. Even though I entered in the right credentials, google is still saying that the app's request is invalid.
Here is how I am making the request:
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export const authOptions = {
// Configure one or more authentication providers
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
// ...add more providers here
],
};
export default NextAuth(authOptions);
Just mention the Authorized redirect URIs in your OAuth 2.0 Client ID configuration (image attached):
enter image description here
next auth doc also state to mention the : Authorized redirect URIs
For production: https://{YOUR_DOMAIN}/api/auth/callback/google
For development: http://localhost:3000/api/auth/callback/google
doc link : https://next-auth.js.org/providers/google
I have an app that authenticates against Azure AD using next-auth 4.
It works fine and I can authenticate.
When I try to configure a custom base path http://localhost:3000/myapp for the app and call signIn() I get a 404 error telling me that http://localhost:3000/api/auth/error is not found.
I have configured all the paths like described below.
What confuses me:
If I use the standard path I notice that [...nextauth.js] gets executed
If I use a custom path, [...nextauth.js] is not even executed
A similar scenario in next.auth 3 worked just fine.
Comparing to next-auth 3 it looks like next-auth 4 does not honor NEXTAUTH_URL.
What can I do?
.env.local
AZURE_CLIENT_ID= ....
AZURE_CLIENT_SECRET=...
AZURE_TENANT_ID=...
JWT_SECRET=...
NEXTAUTH_URL=http://localhost:3000/myapp/api/auth
NEXTAUTH_URL_INTERNAL=http://localhost:3000/mypp/api/auth
NEXT_AUTH_DEBUG=true
APP_BASE_PATH=/myapp
next.config.js:
const basePath = process.env.APP_BASE_PATH;
module.exports = {
reactStrictMode: true,
basePath: `${basePath}`,
};
[...nextauth.js]`
export default NextAuth({
providers: [
AzureADProvider({
clientId: process.env.AZURE_CLIENT_ID,
clientSecret: process.env.AZURE_CLIENT_SECRET,
scope: "offline_access User.Read",
tenantId: process.env.AZURE_TENANT_ID,
}),
],
....
debug: process.env.NEXT_AUTH_DEBUG,
secret: process.env.JWT_SECRET,
});
Did you've tried that solution ?
Try to edit your _app.tsx and define your base path using the props basePath on your , as in that example.
I'm developing a Frontend using NextJS and Keycloak for auth-purpose. After adding Sentry, I'm facing this issue here, where the token endpoint of Keycloak is returning an error; So I can log in.
I've tried many things:
Change the web-origin config of Keycloak, which (obviously) doesn't change or solves the problem
Play with the Sentry client config, without success, because the denyUrls property still make the Sentry SDK send the sentry-trace into the request.
Now I don't have any more Idea, so I coming here for more help.
So after some investigations, I came across this tracingOrigins property that can be set using integrations like this:
integrations: [
new (Sentry.Integrations as any).BrowserTracing({
tracingOrigins: [
process.env.NEXT_PUBLIC_URL,
process.env.NEXT_PUBLIC_BACKEND_URL,
process.env.NEXT_PUBLIC_MATOMO_URL,
],
}),
],
This config is done inside the sentry.client.config.ts file. The downside is that, urls which are not included there, are simply not tracked.
Unfortunately, Keycloak has hardcoded list of allowed headers, so you can't configure Keycloak for sentry-trace header.
You can have some non ideal work arounds:
don't use sentry
compile own hacked Keycloak version, where you allow that header
add reverse proxy in front of Keycloak, which will add sentry-trace header to allowed headers
...
I've solved this issue on a nextJs application by adding the following header to the static sourcemap response.
'Access-Control-Allow-Headers' on next.config.js
const CONFIG = {
headers: () => [
{
source: "/_next/:path*",
headers: [
{ key: "Access-Control-Allow-Origin", value: SHOP_ORIGIN },
{ key: 'Access-Control-Allow-Headers', value: '*' },
],
},
],
}
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `#gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
{
resolve: "gatsby-source-graphql",
options: {
// Arbitrary name for the remote schema Query type
typeName: "DRUPAL",
// Field under which the remote schema will be accessible. You'll use this in your Gatsby query
fieldName: "drupal",
// Url to query from
url: "https://intl-pgs-rsm-growth-platform.pantheonsite.io/graphql",
},
},
],
}
Here's my gatsby-config.js file
When I run gatsby clean && gatsby develop or just gatsby build i get
success createSchemaCustomization - 0.005s
ERROR #11321 PLUGIN
"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:
Unexpected token < in JSON at position 0
ServerParseError: Unexpected token < in JSON at position 0
- JSON.parse
- index.js:35
[test-gatsby]/[apollo-link-http-common]/lib/index.js:35:25
- next_tick.js:68 process._tickCallback
internal/process/next_tick.js:68:7
not finished source and transform nodes - 0.506s
My Drupal 8 site is new with the graphql module installed. And the gatsby site is brand new too.
I started getting this issue on Monday after working fine for a while. There were no code changes to my gatsby but all of a sudden I'm no longer able to get drupal data.
There seems to be few examples of using the "gatsby-source-graphql" plugin so if anyone can help please do
In my case, it was a permissions issue in Drupal. I solved it by going to admin → people → permissions and setting all permissions related to GraphQL for the anonymous user.
The Drupal Graph QL Module requires authentication using tokens. You can use Simple Oauth or JWT. I used Simple Oauth and resolved my issue using the following steps:
Install the Simple Oauth module using composer so it installs it's dependancies $ composer require drupal/simple_oauth, then enable the module.
Create a user role for your third party app and assign content viewing permissions for that role
In admin/config/people/simple_oauth add a token expiration time, generate keys using the button provided (make sure they are generated outside of the drupal web root) and add the path to the public and private key files.
In admin/config/services/consumer add a new consumer (or use the default consumer)
Add a secret password in the Secret field and select the new role you created under Scopes, then save the config page.
Make a post request to your site https://intl-pgs-rsm-growth-platform.pantheonsite.io/oauth/token using curl or postman to generate a token using the following body fields:
grant_type: password
client_id: The client id generated `admin/config/services/consumer`
client_secret: The secret you entered in step 4
username: A user in your drupal site that has the role you created
password: The password assigned to that account
The post request should return the access token if successful. Add your token to your app's .env.development file and update your gatsby-config.js file with the Authorization header: (More info about setting up environment variables in your gatsby app can be found here)
{
resolve: "gatsby-source-graphql",
options: {
typeName: "DRUPAL",
fieldName: "drupal",
url: "https://intl-pgs-rsm-growth-platform.pantheonsite.io/graphql",
headers: {
"Authorization": `Bearer ${process.env.GATSBY_API_TOKEN}`
},
},
},
Video Tutorials of the Simple Oauth set up steps can be found here
More information on this set up process can be found here
Openstack noob here. I have setup an Ubuntu VM with DevStack, and am trying to authenticate with Keystone to obtain a token to be used for subsequent Openstack API calls. The identity endpoint shown on the “API Access” page in Horizon is: http://<DEVSTACK_IP>/identity.
When I post the below JSON payload to this endpoint, I get the error get_version_v3() got an unexpected keyword argument 'auth’.
{
"auth": {
"identity": {
"methods": [
"password"
],
"password": {
"user": {
"name": "admin",
"domain": {
"name": "Default"
},
"password": “AdminPassword”
}
}
}
}
}
Based on the Openstack docs, I should be hitting http://<DEVSTACK_IP>/v3/auth/tokens to obtain a token, but when I hit that endpoint, I get 404 Not Found.
I'm currently using Postman for testing this, but will eventually be doing programmatically.
Does anybody have any experience with authenticating against the Openstack API that can help?
Not sure whether you want to do it in a python way, but if you do, here is a way to do it:
from keystoneauth1.identity import v3
from keystoneauth1 import session
v3_auth = v3.Password(auth_url=V3_AUTH_URL,
username=USERNAME,
password=PASSWORD,
project_name=PROJECT_NAME,
project_domain_name="default",
user_domain_name="default")
v3_ses = session.Session(auth=v3_auth)
auth_token = v3_ses.get_token()
And you V3_AUTH_URL should be http://<DEVSTACK_IP>:5000/v3 since keystone is using port 5000 as a default.
If you do have a multi-domain devstack, you can change the domains, otherwise, they should be default
Just in case you don't have the client library installed: pip install python-keystoneclient
Here is a good doc for you to read about it:
https://docs.openstack.org/keystoneauth/latest/using-sessions.html
HTH