javascript - NextAuth/Auth.js + Keycloak OAuthCallbackError: απέτυχε η επικύρωση της υπογραφής JWT (T3 Stack)
Προσπαθώ να ενσωματώσω έναν απομακρυσμένο πάροχο Keycloak στην εφαρμογή μου Next που τρέχει σε container. Αυτή τη στιγμή, μπορώ να ολοκληρώσω όλη τη ροή πιστοποίησης, συμπεριλαμβανομένου του να φτάσω στη σωστή περίπτωση Keycloak και να συνδεθώ σε αυτήν τη σελίδα, μέχρι το σημείο που θα έπρεπε να έχω συνδεθεί στην εφαρμογή μου... Σε εκείνο το σημείο, λαμβάνω αυτό το σφάλμα:
[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error failed to validate JWT signature {
error: RPError: failed to validate JWT signature
at Client.validateJWT (/app/node_modules/openid-client/lib/client.js:1055:11)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Client.validateIdToken (/app/node_modules/openid-client/lib/client.js:745:49)
at async Client.callback (/app/node_modules/openid-client/lib/client.js:488:7)
at async oAuthCallback (/app/node_modules/next-auth/core/lib/oauth/callback.js:127:16)
at async Object.callback (/app/node_modules/next-auth/core/routes/callback.js:52:11)
at async AuthHandler (/app/node_modules/next-auth/core/index.js:201:28)
at async NextAuthHandler (/app/node_modules/next-auth/next/index.js:23:19)
at async /app/node_modules/next-auth/next/index.js:59:32
at async Object.apiResolver (/app/node_modules/next/dist/server/api-utils/node.js:366:9) {
name: 'OAuthCallbackError',
code: undefined
},
providerId: 'keycloak',
message: 'failed to validate JWT signature'
}
Έχω επίσης μια εφαρμογή Github ενσωματωμένη με την εφαρμογή, και λειτουργεί τέλεια. Ο κώδικας για το [...nextauth].ts μου μπορεί να βρεθεί παρακάτω.
export const authOptions: NextAuthOptions = {
providers: [
KeycloakProvider({
clientId: env.KEYCLOAK_CLIENT_ID,
clientSecret: env.KEYCLOAK_CLIENT_SECRET,
issuer: env.KEYCLOAK_ISSUER,
}),
GithubProvider({
clientId: env.GITHUB_ID || "",
clientSecret: env.GITHUB_SECRET || "",
}),
],
debug: true,
secret: env.NEXTAUTH_SECRET,
};
export default NextAuth(authOptions);
Έτσι φαίνεται το _app.tsx μου:
const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
);
};
export default trpc.withTRPC(MyApp);
Και τέλος, το συστατικό του κουμπιού Σύνδεσής μου:
export default function LoginButton() {
const { data: session } = useSession();
if (session) {
return (
<>
Signed in as {session.user?.name} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
);
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
);
}
Έχω καταφέρει να κάνω αυτή την ενσωμάτωση να λειτουργήσει προηγουμένως σε μια τοπική εκδοχή του Keycloak με container χρησιμοποιώντας την έκδοση quay.io/keycloak/keycloak:20.x.x του Keycloak, αλλά ακόμα δεν έχω καταφέρει να την κάνω να λειτουργήσει με μια απομακρυσμένη/παραγωγική έκδοση. Η παραγωγική έκδοση του Keycloak στην οποία προσπαθώ να συνδεθώ βρίσκεται πίσω από ένα αντίστροφο proxy NGINX, του οποίου η διαμόρφωση είναι αρκετά τυπική αλλά μπορεί να παρασχεθεί κατόπιν αιτήματος. Έχω φτάσει ακόμη στο σημείο να βάλω την εφαρμογή Next και το Keycloak στο ίδιο αρχείο docker-compose, χωρίς αποτέλεσμα.
Έχω προσπαθήσει να αλλάξω την τοποθεσία της εφαρμογής Next, να αλλάξω την τοποθεσία του Keycloak, να δημιουργήσω μια νέα εφαρμογή, να δημιουργήσω ένα νέο Realm KC και να ενσωματωθώ με άλλους παρόχους OAuth. Ποτέ δεν έχω προχωρήσει περισσότερο στη ροή από το OAuthCallbackError, εκτός όταν και οι δύο εκδόσεις ήταν τοπικές, κάτι που δεν είναι αποδεκτό για ένα περιβάλλον παραγωγής.
Έχει κανένας άλλος αντιμετωπίσει αυτό το πρόβλημα ή βρει μια πιθανή λύση;