How to create Add Users Login, Content, And Payments with Reactjs/React Native/Javascript in just 5mins.

Here is a simple api provider which you can use to build your simple reactjs app for free within minutes

  1. Register at https://creator.eartho.world/
  2. install package from yarn add @eartho/one-client-react
  3. Go to https://creator.eartho.world/ and Copy the values of your eartho client id from “setup tab” And replace it with “YOUR_EARTHO_CLIENT_ID” in stage 3 code.
  4. Configure the SDK by wrapping your application in EarthoOneProvider

// src/index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { EarthoOneProvider } from ‘@eartho/one-client-react’;
import App from ‘./App’;

ReactDOM.render(
<EarthoOneProvider
clientId=”YOUR_EARTHO_CLIENT_ID”
>
<App />
</EarthoOneProvider>,
document.getElementById(‘app’)
);

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

function App() {
const {
isLoading,
isConnected,
error,
user,
connectWithPopup,
logout,
} = useEarthoOne();

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

if (isConnected) {
return (
<div>
Hello {user.displayName}{‘ ‘}
<button onClick={() => logout({ returnTo: window.location.origin })}>
Log out
</button>
</div>
);
} else {
return <button
className=”btn btn-outline-success”
id=”login”
onClick={() => connectWithPopup({ access_id: “YOUR_EARTHO_ACCESS_ID” })}
>
Log in
</button>;
}
}

export default App;

then use with your class component

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);

Done

Hope this is helpful in your learning.

Final Output screenshot below.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Manjunathkalburgi

Manjunathkalburgi

13 Followers

I am a software developer and international dance fitness instructor