I'm building a Next.js application where my end user can authorize me to fetch their payment/order data from different 3rd party solutions on their behalf. 3rd party solutions could be
- Stripe
- Paypal
- Adyen
- SomeAccountingSystem by using their APIs.
It would work something like this:
- The user clicks clicks on the the SomeAccountingSystem logo on my site and that takes them to the SomeAccountingSystem's authorization page.
- They sign in and it's a success.
- They are redirected back my site but now the URL is:
http://<mycoolsite.org>/connections?code=<TOKEN_RETURNED>&state=somestate123
Right now the redirect to SomeAccountingSystem authorization page looks like this
<a href="https://apps.SomeAccountingSystem.com/oauth-v1/auth?client_id=<MY_CLIENT_ID>&redirect_uri=http://localhost:3000/connections/&state=somestate123&access_type=offline&response_type=code&account_type=service">
SomeAccountingSystem
</a>
My questions are:
- How do I capture <TOKEN_RETURNED> once the user is redirected back to my site if I'm using Auth0 or next-auth? should I be using middleware for this?
- Can third party solutions like next-auth or Auth0 solve for this?
edit: I have managed to create the authorization flow with a custom provider
import { TokenSet } from "next-auth"
import { OAuthConfig } from "next-auth/providers"
export interface fortnoxProfile extends Record<string, any> {
id: String
}
export const fortnoxProvider: OAuthConfig<fortnoxProfile> =
{
id: "fortnox",
name: "Fortnox",
type: "oauth",
version: "2",
clientId: process.env.FORTNOX_CLIENT_ID,
clientSecret: process.env.FORTNOX_CLIENT_SECRET,
authorization: {
url: "https://apps.fortnox.se/oauth-v1/auth",
params: {
scope: "bookkeeping salary",
redirect_uri: "http://localhost:3000/connections",
access_type: "offline",
response_type: "code",
account_type: "service",
}
},
token: {
params: {
scope: "bookkeeping",
access_type: "offline",
response_type: "code",
account_type: "service",
}
},
idToken: true,
checks: ['pkce', 'state'],
profile(profile: fortnoxProfile, tokens: TokenSet) {
return {
id: "test_profile_id",
}
},
style: {
logo: "/fortnox.jpeg",
logoDark: "/fortnox.jpeg",
bgDark: "#fff",
bg: "#fff",
text: "#000",
textDark: "#000",
}
};
but I can still not get the token with callback functions
import NextAuth, { Session, User } from "next-auth"
import { OAuthConfig } from "next-auth/providers"
import GoogleProvider, { GoogleProfile } from "next-auth/providers/google"
import { fortnoxProfile, fortnoxProvider } from '@/components/src/components/providers/fortnoxProvider';
import { JWT } from "next-auth/jwt";
import { getToken } from "next-auth/jwt"
const providers = [
GoogleProvider<GoogleProfile>({
clientId: process.env.GOOGLE_CLIENT_ID ?? "",
clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "",
}),
fortnoxProvider
]
export const authOptions = {
providers: providers,
session: {
strategy: "jwt",
},
secret: process.env.NEXTAUTH_SECRET,
callbacks: {
async session({ session, token, user }: { session: Session, token: JWT, user: User }): Promise<Session> {
console.log("========== SESSION ==========")
console.log("This is the session: " + JSON. stringify(session))
console.log("This is the token: " + JSON. stringify(token))
return session;
},
async jwt({ token, user }: { token: JWT; user?: User }): Promise<JWT> {
console.log("This is the JWT: " + JSON. stringify(token))
console.log("This is the user: " + JSON. stringify(user))
return token
},
async redirect({ url, baseUrl }) {
console.log("This is the url: " + url)
console.log("This is the baseUrl: " + baseUrl)
return baseUrl
},
async signIn({ user, account, profile, email, credentials }) {
console.log("This is the user: " + user)
console.log("This is the account: " + account)
console.log("This is the profile: " + profile)
console.log("This is the email: " + email)
console.log("This is the credentials: " + credentials)
return true
},
},
}
export default NextAuth(authOptions)
What am i doing wrong here?