1

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

  1. Stripe
  2. Paypal
  3. Adyen
  4. SomeAccountingSystem by using their APIs.

It would work something like this:

  1. The user clicks clicks on the the SomeAccountingSystem logo on my site and that takes them to the SomeAccountingSystem's authorization page.
  2. They sign in and it's a success.
  3. 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:

  1. 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?
  2. 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?

  • yeah you could use next-auth. Here's another answer about how to capture that token using next-auth: https://stackoverflow.com/questions/69068495/how-to-get-the-provider-access-token-in-next-auth – embiem Apr 14 '23 at 17:36
  • Managed to get it to work with next-auth. But I can't seem to capture the returned authorization-code in the URL. My provider https://gist.github.com/floyergilmour/465eba41bacddbda92820a506dc1493e. I played around with call backfunctions and tried printing it out to the console but nothing works – floyergilmour Apr 17 '23 at 14:42
  • here is a gist to my [...nextauth].ts https://gist.github.com/floyergilmour/8d8ac040750f4fb84e24c156df1228e1 – floyergilmour Apr 17 '23 at 14:48

0 Answers0