Guide: Provide custom OIDC provider icons

The default elements-react theme allows overriding the icon components used in the Social Sign in buttons on login & registration.

social-sign-in-button.tsx (using next.js):

import apple from "./apple.svg"
import Image from "next/image"
import customProvider from "./custom-provider.svg"

export const OidcButton = DefaultButtonSocial.WithLogos({
    apple: ({}) => <Image src={apple} />,
    "my-custom-provider": ({}) => <Image src={customProvider} />, // Make sure `my-custom-provider` matches the ID of the OIDC provider configured in Ory.
})

component-overrides.ts

"use client"
import { OryFlowComponentOverrides } from "@ory/elements-react"
import { OidcButton } from "./social-sign-in-button.tsx"

export const accountExperienceComponents: OryFlowComponentOverrides = {
  Node: {
    OidcButton,
  },
}

Available since: 1.0.0-next.17