Replies: 3 comments
-
i have the same issue. do you managed to get the solution? |
Beta Was this translation helpful? Give feedback.
-
I do think next-auth is a great solution and all, but with everything in a blackbox, it's incredibly difficult to debug something simple like this. |
Beta Was this translation helpful? Give feedback.
-
Here is a more generic solution
import { type NextRequest } from 'next/server'
import { signIn } from '@/auth.ts'
/**
* Handles GET requests to sign in with a specific authentication provider.
*
* This route handler provides a route `GET /api/auth/signin/{provider}`
* to sign in with a specific authentication provider, which is otherwise
* not possible with a GET request in Auth.js out of the box, useful for
* redirects in {@link authOptions.callbacks.authorized} callbacks.
*/
export async function GET(
req: NextRequest,
{ params: { provider } }: { params: { provider?: string } },
) {
const callback = req.nextUrl.searchParams.get('callback')
return signIn(provider, callback ? { redirectTo: callback } : undefined)
}
This will enable You might also want to avoid hardcoding the provider in import NextAuth, { NextAuthConfig } from 'next-auth'
import { NextResponse } from 'next/server'
import Keycloak from '@auth/core/providers/keycloak'
export const authOptions: NextAuthConfig = {
providers: [
Keycloak({
/* Params Here */
}),
],
callbacks: {
authorized: async({ auth, request: { nextUrl } }) => {
const isAuthorized = auth?.user && !auth.accessToken.isExpired // Replace with your auth check
if (isAuthorized) return true
const providerId = authOptions.providers.length == 1
? authOptions.providers
.filter(p => 'id' in p)
.map(p => p.id)[0] ?? ''
: ''
const redirectUrl = new URL(`/api/auth/signin/${providerId}`, nextUrl.origin)
redirectUrl.searchParams.append('callbackUrl', nextUrl.href)
return NextResponse.redirect(redirectUrl)
},
},
}
export const { handlers, signIn, signOut, auth } = NextAuth(authOptions) |
Beta Was this translation helpful? Give feedback.
-
We are currently facing an issue where we cannot redirect the user directly to the provider login page. Currently we have Keycloak set up as a provider and if the user clicks on a button that triggers
signIn('keycloak', { callbackUrl: '/dashboard' })
everything works as intended.To add full site protection on most pages, we are using middleware with the
auth()
function. In that function ifauth.req
is null or undefined we have a redirect setup as follows so that the user will be redirected to the login page and then sent back to the page they intended to visit:Unfortunately, this does not work as when the middleware redirects the user to the link above, it errors with
UnknownAction: Unsupported action.
We found two workarounds:Send the user redirect to
api/auth/signin
and they then can click the "login with keycloak" button rendered by next-auth. (This is unideal as it introduces an unnecessary click to get the user to the login form)Creating an api route that calls the
signin()
function with the callback url from the original request.We chose option 2 and it works however for some reason feels a bit wrong. With other OIDC providers like auth0 we can just send the user directly to the signin page without having to the interception you see above.
Is this the best approach or is there a better way to send the user straight to provider login?
Beta Was this translation helpful? Give feedback.
All reactions