For Polyfire to work client-side, you need to setup unique user sessions. That way, each user of your app will have a custom, rate-limited, API token and can use your app according to the restrictions you give them.

To do that you can use our login functions, from the auth module. Our login is a wrap of Supabase Auth for now, so it is very safe to use.

In App.tsx or wherever in your own app, add this authentification code.

A integration with Firebase Auth already exists. You can see how to use it in that tutorial. We plan to add all the other Auth integrations, if you want us to speed up integrating the Auth system you are using, message us on our Discord.

import React from 'react';  
import { usePolyfire } from 'polyfire-js/hooks';

function App() {  
  const { auth } = usePolyfire();
  const { login, status } = auth;
  
  if (status == 'loading') {
    return (
      <div>Loading...</div>
    )
  } else if (status == 'authenticated') {
    return (
      <div>We already logged in!</div>
    )
  } else if (status == 'unauthenticated') {
    return (
      <button onClick={() => login("github")}>Login With GitHub</button>
    )
  } else {
    return <div />
  }
}

export default App;

Providers: Google, GitHub, Firebase

Right now, it is possible to login your users with GitHub SignIn, Google SignIn, and by passing your Firebase JWT.

In the future we plan to support all providers.