Third-Party Providers

By default, the kit uses Google and Firebase as the two third-party providers to allow users to access the application.

With that said, you could decide to add other providers that Firebase provides or even custom ones.

Customizing the Third Party providers

If you want to customize the 3rd party providers or the design of the button, you should update the OAuthProviders component.

This component uses a custom hook called useSignInWithProvider provided by the framework.

A button is built with the component AuthProviderButton. Here is an example:

<AuthProviderButton
  image={'/assets/images/google.png'}
  alt={'Sign in with Google'}
  onClick={onSignIn}
>
  Sign in with Google
</AuthProviderButton>

Let's make together a component that:

  • uses a provider from Firebase
  • allows for SSR by creating a session cookie using the built-in API routes

Let's make a custom OAuthProviders which uses Github instead of the default providers:

import { GithubAuthProvider } from 'firebase/auth';

function OAuthProviders() {
  const [signInWithProvider, signInState] = useSignInWithProvider();
  const [sessionRequest, sessionRequestState] = useCreateSession();
  const createCsrfToken = useCsrfToken();

  useEffect(() => {
    // only run when user signed in
    if (!signInState.success) {
      return;
    }

    // only run one request at a time
    if (
      sessionRequestState.loading ||
      sessionRequestState.error ||
      sessionRequestState.success
    ) {
      return;
    }

    void (async () => {
      const user = signInState.data?.user;
      const idToken = await user?.getIdToken();

      if (!idToken) {
        return;
      }

      const csrfToken = createCsrfToken();

      // we can create the session and store a cookie to make SSR work
      // additionally, we also pass a CSRF token
      await sessionRequest({ idToken, csrfToken });

      onSuccess();
    })();
  }, [
    onSuccess,
    sessionRequest,
    signInState,
    sessionRequestState,
    createCsrfToken,
  ]);

  return (
    <div>
      <AuthProviderButton
        image={'/assets/images/github.png'}
        alt={'Sign in with Github'}
        onClick={onSignIn}
        onSignIn={() => signInWithProvider(new GithubAuthProvider())}
      >
          Sign in with Github
      </AuthProviderButton>

      <If condition={sessionRequestState.error || state.error}>
        {(e) => {
          const error = getFirebaseErrorCode(e);

          return <AuthErrorMessage error={error} />;
        }}
      </If>
    </div>
  );
};

Et voilá! We now have a Github sign-in/up flow with this component alone.