I am trying to integrate a NextJS application with Okta, using the Authorization code flow with PKCE. The flow is not complete because the token request is not being performed.
This is the configuration for the provider:
import NextAuth from 'next-auth';
const oktaBaseUrl = 'https://my-okta-domain.com/oauth2/[auth-server-id]';
const clientId = '[My Client Id]';
const authorizationUrl =
oktaBaseUrl +
'/v1/authorize?response_type=code&response_mode=query&state=false';
const accessTokenUrl = oktaBaseUrl + '/v1/token';
const profileUrl = oktaBaseUrl + '/v1/userinfo';
export default NextAuth({
providers: [
{
id: 'okta',
name: 'Okta',
type: 'oauth',
version: '2.0',
protection: 'pkce',
clientId,
clientSecret: '',
accessTokenUrl,
authorizationUrl,
profileUrl,
scope: 'services',
params: {
grant_type: 'authorization_code',
},
profile(profile) {
return {
id: profile.id as string,
name: profile.name,
email: profile.email
};
}
}
],
});
Thefirst stage seems to be perfromed correctly, but when okta returns the code, I only see a message in my application showing an 403 code. It seems it is trying to get the code without perform the request to the token endpoint
Message in console:
[next-auth][error][oauth_get_access_token_error]
https://next-auth.js.org/errors#oauth_get_access_token_error { statusCode: 403, data: '' } okta y64EzO0u9ZbwqFdjJWqapXggDmC1bWx2DGQaITCpta4
[next-auth][error][oauth_callback_error]
https://next-auth.js.org/errors#oauth_callback_error { statusCode: 403, data: '' }
Is there a configuration I am missing?
Related
I am having a problem with the #nuxtjs/auth-next module for connecting via Cognito. It does send me to my cognito login portal and redirects me with to my app with my token value, and type.
However the module doesn't consume it, it doesnt say that I am logged in and doesn't fetch the user info.
Here is my nuxt.config.js:
strategies: {
awsCognito: {
scheme: 'oauth2',
endpoints: {
authorization: 'https://***********************/login',
token: 'https://***********************/oauth2/token',
userInfo: 'https://***********************/oauth2/userInfo',
logout: 'https://***********************/logout'
},
token: {
property: 'access_token',
type: 'Bearer',
required: true,
maxAge: 3600
},
refreshToken: {
property: 'refresh_token',
maxAge: 60 * 60 * 24 * 30
},
user: {
property: true,
autoFetch: true,
propertyName: false
},
responseType: 'token',
redirectUri: 'http://localhost:3000/callback',
logoutRedirectUri: 'http://localhost:3000/',
clientId: '******************',
scope: ['email', 'openid'],
codeChallengeMethod: 'S256'
}
}
I am trying to add custom oauth provider to my next.js app. I am adding custom provider in [...nextauth].js:
export default NextAuth({
// Configure one or more authentication providers
providers: [
{
id: "moneybutton",
name: "Money Button",
type: "oauth",
version: "2.0",
scope: "auth.user_identity:read users.profiles:read users.profiles.email:read users.balance:read",
params: {
grant_type: "authorization_code"
},
accessTokenUrl: "https://www.moneybutton.com/oauth/v1/token",
requestTokenUrl: "https://www.moneybutton.com/oauth/v1/token",
authorizationUrl: "https://www.moneybutton.com/oauth/v1/authorize?response_type=code",
profileUrl: "https://www.moneybutton.com/api/v1/auth/user_identity",
profile(profile) {
return {
id: profile.data.attributes.id,
name: profile.data.attributes.name,
};
},
clientId: 'my_oauth_identifier',
clientSecret: 'my_client_secret'
}
// ...add more providers here
],
debug: true
});
OAuth flow seems to work correct, as i am seeing my profile id coming back in responses but it finishes on http://localhost:3000/api/auth/signin?error=Callback
I set debug to true and i am getting following errors:
[next-auth][error][oauth_get_access_token_error]
https://next-auth.js.org/errors#oauth_get_access_token_error {
statusCode: 400,
data: '{"errors":[{"id":"6da534f0-a512-11eb-92e8-891975d02f44","status":400,"title":"Bad Request","detail":"Invalid client: client is invalid"}],"jsonapi":{"version":"1.0"}}'
} undefined undefined
[next-auth][error][oauth_get_access_token_error]
https://next-auth.js.org/errors#oauth_get_access_token_error {
statusCode: 400,
data: '{"errors":[{"id":"6da534f0-a512-11eb-92e8-891975d02f44","status":400,"title":"Bad Request","detail":"Invalid client: client is invalid"}],"jsonapi":{"version":"1.0"}}'
} moneybutton 9f3970b8ae39f9d46f9fae56f6fb6135ecb7e87b
[next-auth][error][oauth_callback_error]
https://next-auth.js.org/errors#oauth_callback_error {
statusCode: 400,
data: '{"errors":[{"id":"6da534f0-a512-11eb-92e8-891975d02f44","status":400,"title":"Bad Request","detail":"Invalid client: client is invalid"}],"jsonapi":{"version":"1.0"}}'
It says that client is invalid, but i am sure oauth identifier and secret are correct, as well as redirect URL set to http://localhost:3000/api/auth/callback/moneybutton.
response for profile looks like this if it would be helpful:
{
"data": {
"id": "75101",
"type": "user_identities",
"attributes": {
"id": "75101",
"name": "John Doe"
}
},
"jsonapi": {
"version": "1.0"
}
}
Links to documentations:
https://next-auth.js.org/configuration/providers
https://docs.moneybutton.com/docs/api/v1/api-v1-user-identity
I don't know if it's some bug or my approach is wrong and will apreciate any help
I'm trying to exchange the authorization code I got in the first step of the documentation for access token. Where I'm stuck is how to send a request for the token that contains the code I've just got with the first request.
This is my code:
auth: {
redirect: {
login: '/',
callback: '/auth'
},
strategies: {
wrike: {
scheme: 'oauth2',
endpoints: {
authorization: 'https://login.wrike.com/oauth2/authorize/v4',
token: 'https://login.wrike.com/oauth2/token',
logout: '/'
},
token: {
property: 'access_token',
type: 'Bearer',
maxAge: 1800
},
responseType: 'code',
grantType: 'authorization_code',
accessType: 'offline',
clientId: XXXX,
client_secret: YYYY
}
}
}
I can't figure it out how I should set up the redirect URI, in the client or in the server side? How should I do the second request? (This below)
POST https://login.wrike.com/oauth2/token
//Parameters:
client_id=<client_id>
client_secret=<client_secret>
grant_type=authorization_code
code=<authorization_code>
I think Edward is right. It doesn't seem to work. You can either do the custom schema which is what I am going to do, or you can do what I currently have which is something like this (of course ignore all the console.log and stuff like that):
const urlParams = new URLSearchParams(window.location.search)
const code = urlParams.get('code')
const state = urlParams.get('state')
console.log('state', state)
console.log('stateStorage', window.localStorage.getItem(state))
if ((code && state) && state === window.localStorage.getItem('state')) {
this.$axios.post('http://publisher-local.co.uk:8080/oauth/token', {
grant_type: 'authorization_code',
client_id: 5,
redirect_uri: 'http://localhost:3000/auth',
code_verifier: window.localStorage.getItem('verifier'),
code
}).then(response => {
this.$auth.setUserToken(response.data.access_token)
this.$auth.fetchUser()
})
}
So basically after you are redirected back to your client after logging in on the server page just look for the details in the URL and make the request yourself.
I have this Facebook strategy:
facebook: {
access_token_endpoint: 'http://***.**/api/v0/auth/social',
access_type: 'offline',
client_id: '*******',
grant_type: 'authorization_code',
redirect_uri: socialLoginUrl + '/account/aanmelden',
response_type: 'code',
token_key: 'jwt',
userinfo_endpoint: 'https://****.***.**/user/profile'
},
When I try to register with Facebook I get the following form in the request:
code: **
client_id: **
redirect_uri: **
response_type: **
grant_type: **
I want to supply some data to the back-end when I register:
"attributes":{
"code":"*****",
"vendor":"Facebook"
},
How do I add this to the form that's being sent to the access_token_endpoint ?
// updated question.
Calling the loginWith function:
#click="$auth.loginWith('facebook', { params: data })"
data object:
data () {
return {
data: {
type: 'user',
attributes: {
vendor: 'Facebook',
code: '**'
}
},
}
},
Request payload in the browser:
code=**&client_id=**&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Faccount%2Faanmelden&response_type=code&grant_type=authorization_code
Response from the back-end:
I expect the data object to be available in the payload, but I'm not sure if I'm doing this correctly.
From the official docs, it looks like you can do
this.$auth.loginWith('facebook', { params: { /* additional authentication parameters */ } })
.then(() => this.$toast.success('Logged In!'))
I never used it with Facebook but it's working great with local (using JWT).
The related part of the documentation: https://auth.nuxtjs.org/api/auth#loginwithstrategyname-args
I am newby on NestJS I wrote following code to get access token from third party but API respond data: error: 'invalid_request', error_description: 'Missing Mandatory Parameters'} may be I am missing headers or something else.
Following code I am using:
async getEquifaxToken() {
const token_params = {
grant_type: 'client_credentials',
client_id: 0000,
client_secret: 0000,
scope: 'https://api.equifax.com/business/consumer-credit/v1',
};
try {
const response = await axios.post(
environment.equifax_api_url + 'v2/oauth/token',
querystring.stringify(token_params)
);
console.log('--response--', response.data);
} catch (error) {
console.error(error);
}
console.log('--before after--');
}
I got access token from POSTMAN authentication popup.
Mistake was client_id and client_secret not usedful in token_params so just add
btoa function is not available on nestJS you have to install btoa https://www.npmjs.com/package/btoa and then include client_id and client_secret in headers params.
const client_id = 0000;
const client_secret = 0000;
const token_headers = {
Authorization:
'Basic ' +
btoa(
client_id +
':' +
client_secret
),
};
async getEquifaxToken() {
const token_params = {
grant_type: 'client_credentials',
client_id: client_id,
client_secret: client_secret,
scope: 'https://api.equifax.com/business/consumer-credit/v1',
};
try {
const response = await axios.post(
environment.equifax_api_url + 'v2/oauth/token',
querystring.stringify(token_params),
{headers:token_headers}
);
console.log('--response--', response.data);
//Here I got token successfully.
} catch (error) {
console.error(error);
}
}