Difficulty implementing custom provider (Yahoo!)

[markjoeljimenez]

Apologies in advance as I'm still learning about authentication!

I'm having difficulty trying to create a session for Yahoo's fantasy sports API. I was able to reach part of step 3 when a user is prompted with the request access screen. However once the user clicks accept, the website hangs and results in a 504.

What's interesting is that the URL on the 504 error screen includes the code param with the code Yahoo sends back.

Here's my [...nextauth].js route and settings for my Yahoo application:

Is there something I'm doing wrong?

[Neilshweky]

Hey, any chance you can share the code for the custom provider options for Yahoo? I'm also trying to interact with the Yahoo sports api.

[markjoeljimenez]

I don't remember exactly what I had written but I think it looked similar to this:

// [...nextauth].ts

export const authOptions: any = {
	providers: [
		{
			id: 'yahoo',
			name: 'Yahoo',
			type: 'oauth',
			clientId: YAHOO_CLIENT_ID,
			authorization: {
				url: 'https://api.login.yahoo.com/oauth2/request_auth',
				params: {
					client_id: YAHOO_CLIENT_ID,
					redirect_uri: NEXTAUTH_URL,
					response_type: 'code',
				},
			},
		},
	],
	callbacks: {
		async signIn({ user, account, profile, email, credentials }: any) {
			return true;
		},
		async redirect({ url, baseUrl }: any) {
			return baseUrl;
		},
		async session({ session, user, token }: any) {
			return session;
		},
		async jwt({ token, user, account, profile, isNewUser }: any) {
			return token;
		},
	},
};

export default NextAuth(authOptions);

Revisiting this now, I'm able to authorize successfully and get redirect to the redirectURL with the code parameter in the URL. At that point I was hoping the session callback would fire so I could call the get_token endpoint with the code param. However, it just doesn't work for some reason. The only callback that fires is redirect.

This person found a workaround though. The only potential issue I see with that workaround is how to set the session state within next-auth. I don't think there is a way to explicitly set the session state

[jcobert]

Hey, were you able to come up with a viable solution?

I'm able to get a token using that workaround of redirecting to another route I defined to then request token from yahoo. How do I store that token and actually use it in a session? Can it be sent back to next-auth? Is there an alternative to using next-auth to get this working?

Between my inexperience with authentication in general and yahoo's lousy developer resources, this project is turning out to be much more of a pain than I imagined.

I thought I could at least salvage my lousy fantasy season by making a useful app for the league...

[markjoeljimenez]

Yup, I've finally figured it out. Turns out Yahoo has their own well-known which solves everything.

Here's my updated [...nextauth].ts

export const authOptions: AuthOptions = {
	debug: true,
	// Configure one or more authentication providers
	providers: [
		{
			id: 'yahoo',
			name: 'Yahoo',
			type: 'oauth',
			clientId: YAHOO_CLIENT_ID,
			clientSecret: YAHOO_CLIENT_SECRET,
			wellKnown:
				'https://api.login.yahoo.com/.well-known/openid-configuration',
			authorization: {
				params: {
					client_id: YAHOO_CLIENT_ID,
					redirect_uri: REDIRECT_URI,
					response_type: 'code',
				},
			},
			profile(profile) {
				return {
					id: profile.sub,
					name: profile.name,
					email: profile.email,
					image: profile.picture,
				};
			},
			idToken: true,
			client: {
				authorization_signed_response_alg: 'ES256',
				id_token_signed_response_alg: 'ES256',
			},
		},
	],
       callbacks: {
		async session({ session, token, user }) {
			// Send properties to the client, like an access_token and user id from a provider.
			(session as any).accessToken = token.accessToken;

			return session;
		},
		async jwt({ account, profile, token }) {
			// Persist the OAuth access_token and or the user id to the token right after signin
			if (account) {
				token.accessToken = account.access_token;
			}

			return token;
		},
	},
};

I'm able to log in successfully but can't call Yahoo's endpoints due to CORS errors:

Access to fetch at 'https://fantasysports.yahooapis.com/fantasy/v2/users;use_login=1/games' from origin [REDACTED] has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

[jcobert]

Hey Mark, thanks a lot for getting back and I'm glad you got the auth working.

I'm not having any luck using your config though. It fetches a code successfully but then throws the following error:

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error INVALID_REDIRECT_URI (Redirect URI doesn't match with registered URI) {
  error: OPError: INVALID_REDIRECT_URI (Redirect URI doesn't match with registered URI)

I am getting a code back appended to my callback url and authorization is working fully in Postman, though that isn't using this same well-known configuration. But that should indicate that my redirect_uri is registered.

What version of next-auth are you using? Maybe I can try a previous version. I'm on 4.23.1 and next v13.5.4

Also, their (messy and discrepant) docs mention that scope=openid and nonce params are required in the request_auth call. I don't see you using those so is that just outdated info you think?

I've added the redirect to the client options but that didn't help.

client: {
        authorization_signed_response_alg: "ES256",
        id_token_signed_response_alg: "ES256",
        redirect_uris: [process.env.YAHOO_REDIRECT_URI as string],
      },

Note: my redirect is set to https:[MY_HOSTED_DOMAIN]/api/auth/callback/yahoo which I have configured to redirect to http://localhost:3000. This hasn't prevented me from getting a code or token or even calling the fantasy endpoints in Postman or even using the pseudo workaround I had going before but wondering if this is now presenting an issue with using the OpenID config.

Anyway, I'm just grasping for straws. I'm about ready to throw in the towel but anything else you can think of before I do? Thanks again.

[markjoeljimenez]

I remember getting that error before but can't remember exactly how I fixed it. I think I had to update next and nextauth. Feel free to take a look at my commit history here: https://github.com/markjoeljimenez/optidfs/commits/auth

And I've also deployed it here if you'd like to see it working: https://auth-test.optidfs.com/

[markjoeljimenez]

And here's a picture of my settings in my Yahoo app

[jcobert]

Nice, thanks. I actually got the auth working today and it looks like it does have something to do with how I was redirecting my domain to localhost. I added https://localhost:3001 as a redirect URI in the Yahoo dashboard and used that in my auth config and then I run the local-ssl-proxy package to point those redirects back to http://localhost:3000.

I also just discovered ngrok, which looks like a service meant to help with just this situation so I'll check that out. How do you handle that with your app being hosted and accessing from local dev since Yahoo requires https in their redirects?

I see what you mean about the CORS error and what I did was set up my own API route that makes the call to Yahoo and it works without error so far. But man, getting that XML back is atrocious. Know a good way to deal with that? I'm just using xml2js here. This feels like an API that hasn't been touched since the 1950s.

// app/api/yahoo/fantasy/league/route.ts

import { NextApiRequest, NextApiResponse } from "next";
import { NextResponse } from "next/server";
import axios from "axios";
import { getToken } from "next-auth/jwt";
import { parseString } from "xml2js";

export const GET = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const token = await getToken({ req });

    const url = new URL(req?.url || "");
    const params = url?.searchParams;
    const leagueId = params?.get("leagueId");

    const baseUrl = "https://fantasysports.yahooapis.com/fantasy/v2";

    const response = await axios.get(`${baseUrl}/league/${leagueId}/metadata`, {
      headers: { Authorization: `Bearer ${token?.accessToken}` },
    });

    const data = await response?.data;

    let parsedXml = {};
    parseString(data, (err, result) => (parsedXml = result));

    return NextResponse.json(parsedXml?.fantasy_content ?? {});
  } catch (error) {
    console.log("Error getting league:", error);
  }
};

And I was thinking this way, using the access token server-side, we don't need to expose it to the client in the session. I could be wrong in thinking that but I seem to have no problem not setting the token in the session. I was wondering if the token should be stored in a cookie or something. I'm not too familiar with cookies and security best practices.

But instead of setting it in the next-auth session callback, I did it in the jwt callback.

callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
  },

Anyway, hope that helps you out a little bit since you've been helping me. And let me know what your setup is for the https local redirect.

[pratik123-coder]

Finally after 4 hours of documentation and squeezing each an every bit of Chat GPT and Gemini I finally got Yahoo OAuth 2.0

i used, ngork to crate a tunnel from localhost:3000 -> https://b62d-2405-201-a00a-a0cf-7d7b-1ec5-b269-f8fc.ngrok-free.app to get a https which can be used as a callback and Homepage URL in Yahoo OAuth 2.0 app creation.

//api//auth//[...nextauth]/route.ts
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID!,
clientSecret: process.env.GOOGLE_SECRET!,
}),
{
id: 'yahoo',
name: 'Yahoo',
type: 'oauth',
clientId: process.env.YAHOO_CLIENT_ID!,
clientSecret: process.env.YAHOO_CLIENT_SECRET!,
wellKnown: 'https://api.login.yahoo.com/.well-known/openid-configuration',
authorization: {
url: 'https://api.login.yahoo.com/oauth2/request_auth',
params: {
client_id: process.env.YAHOO_CLIENT_ID!,
redirect_uri: process.env.REDIRECT_URI!,
response_type: 'code',
scope: 'openid profile email',
},
},
token: 'https://api.login.yahoo.com/oauth2/get_token',
userinfo: 'https://api.login.yahoo.com/openid/v1/userinfo',
profile(profile) {
return {
id: profile.sub,
name: profile.name,
email: profile.email,
image: profile.picture,
}
},
idToken: true,
client: {
authorization_signed_response_alg: 'ES256',
id_token_signed_response_alg: 'ES256',
},
checks: ['state'],
},
],
callbacks: {
async signIn({ profile }) {
if (!profile?.email) {
throw new Error('No profile')
}
return true
},
session,
async jwt({ token, user, account, profile }) {
if (profile) {
if (!user) {
throw new Error('No user found')
}
token.id = user.id
}
return token
},
},
}

const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }

Documentation followed - https://developer.yahoo.com/oauth2/guide/flows_authcode/


By Using this, i was able to login using Yahoo OAuth 2.0 in My Next-Auth Authentication.