I got log in set up with strava working - however I would like to be able to make authenticated calls against the strava api for the user (basically to get activities) - which requires an access token - we have refresh tokens but just wondering if there's already a way to do this baked into convex-auth?
#How do you make authenticated calls against auth provider (convex auth / oauth )?
gleaming inlet
placid stirrupBOT
Hi @gleaming inlet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To make authenticated calls against an OAuth provider like Strava using Convex Auth, you'll need to handle the access token and refresh token management yourself. Convex Auth doesn't provide built-in functionality for making authenticated calls to third-party APIs. However, you can implement this functionality using Convex's server-side functions. Here's a general approach you can take:
-
Store the access token and refresh token in your Convex database when the user authenticates with Strava.
-
Create a Convex function to make authenticated calls to the Strava API. This function should:
- Retrieve the stored access token for the user
- Make the API call to Strava using the access token
- If the token is expired, use the refresh token to get a new access token, update it in the database, and then make the API call
-
Call this Convex function from your client-side code when you need to fetch Strava activities.
Here's a basic example of how you might structure this:
// In a Convex function file (e.g., strava.ts)
import { mutation, query } from "./_generated/server";
export const getStravaActivities = query({
args: {},
handler: async (ctx) => {
const userId = await ctx.auth.getUserIdentity();
if (!userId) {
throw new Error("Not authenticated");
}
// Fetch the user's Strava tokens from your database
const user = await ctx.db.get(userId.tokenIdentifier);
if (!user || !user.stravaAccessToken) {
throw new Error("Strava not connected");
}
// Make the API call to Strava
const response = await fetch("<https://www.strava.com/api/v3/athlete/activities",> {
headers: {
Authorization: `Bearer ${user.stravaAccessToken}`,
},
});if (response.status === 401) {
// Token expired, refresh it (implementation not shown)
// Then retry the API call
}
return await response.json();
},
});
This approach allows you to make authenticated calls to Strava while keeping your access tokens secure on the server side. You'll need to implement token refresh logic and error handling as well.
Remember that this is a basic example and you'll need to adapt it to your specific use case and implement proper error handling and token refresh logic.
For more information on working with Convex functions and authentication, you can refer to the **Convex documentation on authentication** (<https://docs.convex.dev/auth/convex-auth>) and **custom auth integration** (<https://docs.convex.dev/auth/advanced/custom-auth#client-side-integration>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------@placid stirrup How do I update the default oauth token exchange handler to save the access / refresh tokens?
placid stirrupBOT
Let me check the knowledge base for you again. One moment! :books:
To update the default OAuth token exchange handler in Convex Auth to save the access and refresh tokens, you can use the callbacks option when configuring your authentication. Specifically, you'll want to use the createOrUpdateUser callback. Here's how you can do it:
export const { auth, signIn, signOut, store } = convexAuth({
providers: [
// Your OAuth provider configuration here
],
callbacks: {
async createOrUpdateUser(ctx, args) {
if (args.existingUserId) {
// Update existing user
await ctx.db.patch(args.existingUserId, {
accessToken: args.account.access_token,
refreshToken: args.account.refresh_token,
// Add any other fields you want to update
});
return args.existingUserId;
}
// Create new user
return ctx.db.insert("users", {
email: args.profile.email,
accessToken: args.account.access_token,
refreshToken: args.account.refresh_token,
// Add any other fields you want to store
});
},
},
});
This approach allows you to save the access and refresh tokens to your Convex database when a user signs in or updates their account. The createOrUpdateUser callback is called after the OAuth flow completes, giving you access to the tokens and other user information.
A few important points to note:
-
Make sure your schema includes fields for
accessTokenandrefreshTokenin your users table. -
The exact field names for the tokens in
args.accountmay vary depending on your OAuth provider. Adjust accordingly. -
Remember to handle token expiration and refreshing in your API calls, as shown in the previous example.
-
Ensure you're following security best practices when storing tokens. Consider encrypting sensitive data before storing it in the database.
For more details on customizing the auth flow and working with callbacks, you can refer to the Convex Auth documentation on controlling user creation and account linking behavior (https://labs.convex.dev/auth/advanced#controlling-user-creation-and-account-linking-behavior).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
gleaming inlet
@placid stirrup account doesn't exist on args, I'm not sure how to get to the refresh and access tokens that come back in the callback endpoint
placid stirrupBOT
Let me check the knowledge base for you again. One moment! :books:
I apologize for the confusion in my previous response. You're right that account is not directly available in the args object of the createOrUpdateUser callback. Let's clarify how to access the access and refresh tokens in Convex Auth.
The access and refresh tokens are typically available in the profile object of the args parameter. However, the exact structure can vary depending on the OAuth provider you're using. Here's an updated example of how you might access these tokens:
export const { auth, signIn, signOut, store } = convexAuth({
providers: [
// Your OAuth provider configuration here
],
callbacks: {
async createOrUpdateUser(ctx, args) {
console.log("Profile:", args.profile); // Log the profile to see its structure
// The exact path to tokens may vary based on your OAuth provider
const accessToken = args.profile.access_token;
const refreshToken = args.profile.refresh_token;
if (args.existingUserId) {
// Update existing user
await ctx.db.patch(args.existingUserId, {
accessToken,
refreshToken,
// Add any other fields you want to update
});
return args.existingUserId;
}
// Create new user
return ctx.db.insert("users", {
email: args.profile.email,
accessToken,
refreshToken,
// Add any other fields you want to store
});
},
},
});
If you're still having trouble accessing the tokens, you can try the following:
-
Log the entire
argsobject to see its structure:console.log("Args:", JSON.stringify(args, null, 2)); -
Check if the tokens are nested differently in the
argsobject. They might be under a different key or nested structure depending on your OAuth provider.
- If you're using a custom OAuth provider, make sure you've configured it to return the access and refresh tokens in the profile or account information.
If you're still unable to find the tokens, you might need to customize your OAuth provider configuration to ensure it's returning the tokens in a way that Convex Auth can access them.
For more detailed information on customizing OAuth providers and handling tokens, you can refer to the Convex Auth documentation on advanced configuration (https://labs.convex.dev/auth/advanced#controlling-user-creation-and-account-linking-behavior).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
gleaming inlet
@placid stirrup How do I customize the part of the provider that does the authorization code / token exchange? They are not in profile or account.
placid stirrupBOT
Let me check the knowledge base for you again. One moment! :books:
To customize the authorization code/token exchange process in Convex Auth, you can use the profile method in your OAuth provider configuration. This method allows you to control how the profile information is processed after the token exchange occurs. Here's how you can customize it:
import { convexAuth } from "@convex-dev/auth/server";
import Google from "@auth/core/providers/google";
export const { auth, signIn, signOut, store } = convexAuth({
providers: [
Google({
profile(profile, tokens) {
return {
id: profile.sub,
name: profile.name,
email: profile.email,
image: profile.picture,
accessToken: tokens.access_token,
refreshToken: tokens.refresh_token,
// Add any other fields you want to include
};
},
}),
],
});
In this example, the profile method receives two parameters:
profile: The user profile information returned by the OAuth provider.tokens: The tokens (including access_token and refresh_token) returned from the token exchange.
You can customize this method to include the tokens or any other information you need in the profile object that will be passed to the createOrUpdateUser callback.
If you need even more control over the token exchange process, you might need to implement a custom OAuth provider. This is an advanced use case and requires more in-depth knowledge of the OAuth flow. You can find more information about custom providers in the Convex Auth documentation on completely customizing the sign-in process (https://labs.convex.dev/auth/config/passwords#completely-customize-the-sign-in-process).
Remember to adjust your createOrUpdateUser callback to handle the new structure of the profile object:
callbacks: {
async createOrUpdateUser(ctx, args) {
const { accessToken, refreshToken } = args.profile;
// Use accessToken and refreshToken as needed
},
},
This approach allows you to access the tokens directly in your createOrUpdateUser callback, giving you full control over how they are stored and used in your application.
Convex Auth API Reference (https://labs.convex.dev/auth/api_reference/server#callbackscreateorupdateuser)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
gleaming inlet
@placid stirrup how can I trigger an action to run when after a user successfully logs in
placid stirrupBOT
Let me check the knowledge base for you again. One moment! :books:
To trigger an action after a user successfully logs in with Convex Auth, you have a couple of options. Let's explore them:
- Using the
createOrUpdateUsercallback:
You can use the createOrUpdateUser callback in your Convex Auth configuration to run an action immediately after a user logs in. This callback is called every time a user signs in, whether they're a new or existing user.
export const { auth, signIn, signOut, store } = convexAuth({
providers: [
// Your OAuth provider configuration here
],
callbacks: {
async createOrUpdateUser(ctx, args) {
// Your existing user creation/update logic here
// Trigger your action here
await ctx.runAction(api.yourAction.run, { userId: args.existingUserId || newUserId });
return args.existingUserId || newUserId;
},
},
});
This method is particularly useful if you need to perform server-side actions immediately after login.
- Using a client-side effect:
If you prefer to trigger the action from the client side, you can use a React effect hook that runs when the authentication state changes. This approach is demonstrated in the Convex documentation:
import { useConvexAuth } from "convex/react";
import { useEffect } from "react";
import { useMutation } from "convex/react";
import { api } from "../convex/_generated/api";
export function useStoreUserEffect() {
const { isLoading, isAuthenticated } = useConvexAuth();
const storeUser = useMutation(api.users.store);
useEffect(() => {
if (!isAuthenticated) {
return;
}
async function createUser() {
const id = await storeUser();
// Trigger your action here
await runAction(api.yourAction.run, { userId: id });
}
createUser();
}, [isAuthenticated, storeUser]);return {
isLoading: isLoading || (isAuthenticated && userId === null),
isAuthenticated: isAuthenticated && userId !== null,
};
}
This approach is flexible and allows you to trigger client-side actions or mutations after the user is authenticated.
**Source: Calling the store user mutation from React** (<https://docs.convex.dev/auth/database-auth#calling-the-store-user-mutation-from-react>)
Remember to replace `api.yourAction.run` with the actual action you want to trigger. Also, ensure that your action is properly defined in your Convex backend.
Choose the method that best fits your application's architecture and requirements. The server-side approach (option 1) is generally more secure and reliable, while the client-side approach (option 2) offers more flexibility in terms of user experience.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------That's a mutation ctx so I can't run an action on it
@placid stirrup that's a mutation ctx sO i can't run an action on it - how can I use an action in this call back?
placid stirrupBOT
Let me check the knowledge base for you again. One moment! :books:
You're absolutely right, and I apologize for the confusion in my previous answer. You're correct that in a mutation context, which is what the createOrUpdateUser callback uses, you can't directly run an action. However, you can schedule an action to run after the mutation completes. Here's how you can modify the callback to schedule an action:
export const { auth, signIn, signOut, store } = convexAuth({
providers: [
// Your OAuth provider configuration here
],
callbacks: {
async createOrUpdateUser(ctx, args) {
let userId: Id<"users">;
if (args.existingUserId) {
// Update existing user
userId = args.existingUserId;
await ctx.db.patch(userId, {
// Update user fields as needed
});
} else {
// Create new user
userId = await ctx.db.insert("users", {
// Insert user fields as needed
});
}
// Schedule the action to run immediately after the mutation
await ctx.scheduler.runAfter(0, api.yourAction.run, { userId });
return userId;
},
},
});
This approach uses the ctx.scheduler.runAfter method to schedule your action to run immediately after the mutation completes. The runAfter method takes three arguments:
- The delay in milliseconds (0 for immediate execution)
- The action to run (referenced from your API)
- The arguments to pass to the action
By using ctx.scheduler.runAfter, you ensure that the action runs after the user creation/update is complete, while still maintaining the integrity of the mutation context.
Source: Convex documentation on scheduling functions (https://docs.convex.dev/scheduling/scheduled-functions)
Remember to define your action in a separate file and ensure it's properly exported in your Convex API. Also, be aware that scheduled actions don't have access to the authentication context of the original request, so you'll need to pass any necessary user information as arguments to the action.