3️⃣Step 3 - Use the access point in your code

Before You Begin:

  • Make sure you have completed "Step 2 - Create your first access point with payments". Click Here.

  • Make sure you are familiar with access points and how to create them. Click Here.

Use Access Points in your Code:

  1. Now, simply grab the access ID from the dashboard after you've set up the access point, and utilize it with "connectWithPopup" in your code.

  2. Next, retrieve the "access" property, which is a List<String>, from getUser(), and verify whether the user has access to the content.

Here are code examples that will explain it better:

Need an example project? https://github.com/eartho-group/one-client-react Use the useEarthoOne hook in your components to access the authentication state (isLoading, isConnected and user) and authentication methods (connectWithPopup and logout):

// src/App.js
import React from 'react';
import { useEarthoOne } from '@eartho/one-client-react';

function App() {
  const {
  } = useEarthoOne();

  if (isLoading) {
    return <div>Loading...</div>;
  if (error) {
    return <div>Oops... {error.message}</div>;

  if (isConnected) {

      User Has Premium Access!
    return (
        Hello {user.displayName}{' '}
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log out
  } else {
    return <button
          className="btn premium_button"
          onClick={() => connectWithPopup({ accessId: "YOUR_EARTHO_PREMIUM_ACCESS_ID" })}
        Log in

export default App;

Use with a Class Component

Use the withEarthoOne higher order component to add the earthoOne property to Class components:

import React, { Component } from 'react';
import { withEarthoOne } from '@eartho/one-client-react';

class Profile extends Component {
  render() {
    // `this.props.earthoOne` has all the same properties as the `useEarthoOne` hook
    const { user, logout } = this.props.earthoOne;
    return <div>Hello {user.name}</div>;

export default withEarthoOne(Profile);

Last updated