How to get user's profile picture url using google?

[smoky remnant]

How to get user's profile picture url using google? I've signed up an user using oauth.

How can I get user's pfp using convex auth?

[midnight bobcat]

Hi @smoky remnant. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

When you sign up a user using Google OAuth with Convex Auth, the user's profile picture URL (pfp) is automatically saved in the users table under the image field by default. Convex Auth extracts the image from the Google profile and stores it for you.

To access the user's profile picture URL:

1. Check the users table: The image field will contain the profile picture URL provided by Google.
2. Fetch the current user: You can write a query to fetch the current user's data, including the image field.

For example, if you use the default setup, the image field is populated automatically:

import Google from "@auth/core/providers/google";
import { convexAuth } from "@convex-dev/auth/server";
 
export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [Google],
});

If you want to customize which fields are saved (for example, to add or rename fields), you can provide a custom profile method in your provider config. For Google, the image field is typically available as profile.picture:

Google({
  profile(googleProfile, tokens) {
    return {
      id: googleProfile.id,
      name: googleProfile.name,
      email: googleProfile.email,
      image: googleProfile.picture, // This is the profile picture URL
    };
  },
})

Make sure your users table schema includes the image field.

Summary:

• The user's profile picture URL is stored in the image field of the users table by default when using Google OAuth with Convex Auth.
• You can fetch it by querying the current user's data and accessing the image field.

For more details, see the Convex Auth documentation on retrieving other profile information and provider configuration.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@smoky remnant Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[smoky remnant]

@midnight bobcat Can you please make it so I extract all things that I can

[midnight bobcat]

Let me check the knowledge base for you again. One moment! :books:

---

To extract all available user profile information from Google when using Convex Auth, you should customize the profile method in your Google provider configuration. The profile method receives the raw Google profile object, and you can return any fields you want to store in your users table. Make sure your users table schema includes all the fields you want to save.

Here’s how you can do it:

1. Customize the profile method
   In your convex/auth.ts, configure the Google provider and extract all relevant fields from the Google profile:

import Google from "@auth/core/providers/google";
import { convexAuth } from "@convex-dev/auth/server";

export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [
    Google({
      profile(googleProfile, tokens) {
        return {
          id: googleProfile.id, // Must be a string
          name: googleProfile.name,
          email: googleProfile.email,
          image: googleProfile.picture, // Profile picture URL
          givenName: googleProfile.given_name,
          familyName: googleProfile.family_name,
          locale: googleProfile.locale,
          // Add any other fields you need from the Google profile object
        };
      },
    }),
  ],
});

Make sure to convert id to a string if it is not already, as Convex expects a string id.

2. Update your users table schema
   Your users table schema (convex/schema.ts) should include all the fields you want to store:

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

const schema = defineSchema({
users: defineTable({
id: v.string(),
name: v.optional(v.string()),
email: v.optional(v.string()),
image: v.optional(v.string()),
givenName: v.optional(v.string()),
familyName: v.optional(v.string()),
locale: v.optional(v.string()),
// Add other fields as needed
}),
// ...other tables
});

export default schema;

3. **Reference**  
- The profile method allows you to extract and store any fields from the OAuth provider’s profile object, as long as your schema supports them. See [Retrieving other profile information](<https://labs.convex.dev/auth/config/oauth#retrieving-other-profile-information>).
- You must [customize your schema](<https://labs.convex.dev/auth/setup/schema>) to include any additional fields you want to store.

**Note:**  
The exact field names available in googleProfile depend on Google’s API. Common fields include id, name, email, picture, given_name, family_name, and locale, but you should consult [Google’s documentation](<https://developers.google.com/identity/openid-connect/openid-connect#an-id-tokens-payload>) for the full list.

If you want to extract even more fields, simply add them to the return object in the profile method and to your schema as optional fields.

If you need to perform additional writes or logic after user creation, you can use the afterUserCreatedOrUpdated or createOrUpdateUser callbacks as described in the [Convex Auth API reference](<https://labs.convex.dev/auth/api_reference/server#callbackscreateorupdateuser>).

Let me know if you need a specific example for querying this data!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

@smoky remnant Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[smoky remnant]

@midnight bobcat (parameter) googleProfile: any

Why is googleProfile an "any" value?

[midnight bobcat]

Let me check the knowledge base for you again. One moment! :books:

---

The reason why the parameter googleProfile is typed as any in your code is not explicitly documented in the official Convex documentation or Discord support threads. However, based on the available knowledge sources, this typically happens when the TypeScript types for the OAuth provider's profile object are not strictly defined or imported, so TypeScript defaults to any.

In the Convex Auth documentation, the profile method receives the provider's profile object, and the example does not specify a type for the profile parameter—it is left untyped, which TypeScript interprets as any unless you provide a type yourself. For example:

Google({
  profile(googleProfile, tokens) {
    return {
      id: googleProfile.id,
      name: googleProfile.name,
      email: googleProfile.email,
      image: googleProfile.picture,
      // ...
    };
  },
})

(Retrieving other profile information)

If you want better type safety, you would need to define or import the appropriate type for the Google profile object, as Convex does not provide a built-in type for this parameter.

In summary:
googleProfile is any by default because Convex does not enforce a specific type for the OAuth profile object in the profile method, and TypeScript will infer any unless you specify a type yourself. The knowledge sources do not mention a way to change this directly within Convex Auth.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: