React Implicit Authorization

<ImplicitAuthProvider /> is a component that registers, loads, and creates unify social SDK methods. At the moment it handles the following SDK:

• facebook SDK
• google SDK

Put <ImplicitAuthProvider /> somewhere high in your app, above components that might use its API:

import { ImplicitAuthProvider } from 'react-implicit-auth';
import MyPage from './MyPage'

const handleAuthProviderError = (error) => {
  console.error(error);
}
const handleAuthProviderSuccess = (data) => {
  console.log(data);
}

const MyApp = () => (
  <ImplicitAuthProvider
    onInitError={handleAuthProviderError}
    onAutoLoginError={handleAuthProviderError}
    onAutoLoginSuccess={handleAuthProviderSuccess}
    onInitSuccess={handleAuthProviderSuccess}
    config={{
      facebook: {
        debug: true,
        appId: '****************',
        cookie: true,
        version: 'v9.0',
        xfbml: false,
      },
      google: {
        clientId: '*****.apps.googleusercontent.com',
        scope: 'profile email',
      },
    }}
  >
    <MyPage />
  </ImplicitAuthProvider>
);

export default MyApp;

The config object gets distributed to each provider's adapter. You can modify the configuration or use the existing one. The configuration modification gets synchronized with local storage. Don't be afraid to refresh the page.

The default configuration can have some limitations or not be working for you in some cases. In this case create you own configuring apps to get clientId or appId:

• google app registration
• facebook app registration

Beside core methods the ImplicitAuthProvider component passes event emitter methods. The emitter functionality comes from mitt - event emitter library. The API documentation you can find here.

If you call core methods in multiple places but store data in a root component the events listening might be a good solution.

A core method call causes the event gets triggered("login", "logout", etc.). Also there a special error event which occurs when a core method call crashes.

import { useImplicitAuth } from 'react-implicit-auth';

/**
 * Don't forget to put the following component as child of `ImplicitAuthProvider`.
 */
const Root = () => {
  const auth = useImplicitAuth();
  const [user, setUser] = useState(null);

  useEffect(() => {
    const handleLoginEvent = async () => {
      const user = await auth.getUserProfile();

      setUser(user.data);
    };

    const handleLogoutEvent = async () => {
      setUser(null);
    };

    /**
     * If autoLogin is failed it makes sense to redirect a user
     * to the login view.
     */
    const handleErrorEvent = ({ event }) => {
      if (event === 'autoLogin') {
        router.push('/login');
      }
    };

    authClient?.on?.('login', handleLoginEvent);
    authClient?.on?.('autoLogin', handleLoginEvent);
    authClient?.on?.('logout', handleLogoutEvent);
    authClient?.on?.('error', handleErrorEvent);

    return () => {
      authClient?.off?.('login', handleLoginEvent);
      authClient?.off?.('autoLogin', handleLoginEvent);
      authClient?.on?.('logout', handleLogoutEvent);
      authClient?.off?.('error', handleErrorEvent);
    };
  }, [authClient]);

  return <>{user && <span>Hello, {user.name}</span>}</>;
};

export default Root;

I hope you got the idea. In this example you see the global component that can react on every login/logout and keep this data in its state.

The default config which includes application ids for google and facebook has only a demonstration purpose. The reason for having it is to save developers time if they haven't their own application registered. If a developer has its applications registered the default config might be replaced.

Using the default config users can be sure that we don't collect, use, or share any user's data.

Be sure the hook gets called as a child of <ImplicitAuthProvider />.

import { useImplicitAuth, ImplicitAuthProvider } from 'react-implicit-auth';

const FacebookLoginButton = () => {
  const auth = useImplicitAuth();

  return <button onClick={() => auth.facebook.login()}>{children}</button>;
};

const MyApp = () => {
  return (
    <ImplicitAuthProvider
      config={{
        facebook: {
          debug: true,
          appId: '****************',
          cookie: true,
          version: 'v9.0',
          xfbml: false,
        },
      }}
    >
      <FacebookLoginButton />
    </ImplicitAuthProvider>
  );
};

export default MyApp;