This library is only for client-side React. A NextJS library is coming soon!

Authentication with React

1

Create a new React project

If you don’t have one already, create a new React project:

Terminal
# create a new vite project:
npm create vite@latest

# select the React + Javascript template in the Vite prompts

Otherwise, open your existing project.

2

Install the @basictech/react library

Install the @basictech/react library in your app:

Terminal
npm install @basictech/react
3

Add the BasicProvider to main.jsx

Replace YOUR_PROJECT_ID with your Project ID from the Basic dashboard
main.jsx
// add the BasicProvider to your existing imports
import { BasicProvider } from '@basictech/react'

// wrap your app in BasicProvider, including the project id 
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BasicProvider project_id='YOUR_PROJECT_ID'>
      <App />
      {/* rest of your code ... */}
    </BasicProvider>
  </React.StrictMode>,
)
4

Add auth to your project

In App.jsx, import the useAuth hook:

App.jsx
// add the useBasic react hook to your existing imports
import { useBasic } from '@basictech/react'

function App() {
  // import the signin function at the top of your App function
  const { signin } = useBasic()
  
  // ... rest of your App code ...
}
5

Create a login button

App.jsx
function App() {
  const { signin } = useBasic()

  // other existing code...

  return (
    <>
      {/* add a button, calling the signin hook */}
      <button onClick={signin}>sign in</button>
      
      {/* ... rest of your App code ... */}
    </>
  )
}

Let’s test it out! Clicking on the button should now redirect you to the Basic.id page where your users can login or create an account.

6

(Optional) Display the user email

Import user from the useBasic hook:

App.jsx
function App() {
  // add "user" to the useBasic hook
  const { signin, user} = useBasic()

  // other existing code...

  return (
    <>
      <button onClick={signin}>sign in</button>
      {/* display the user email */}
      <p>hello {user?.email}</p>
      
      {/* ... rest of your App code ... */}
    </>
  )
}
7

Add a logout function

Use the isSignedIn hook to check if the user is logged in, and the signout function to sign out the user:

App.jsx
function App() {
  // add "isSignedIn" and "signout" to the useBasic hook
  const { signin, user, isSignedIn, signout} = useBasic()

  // other existing code...

  return (
    <>
      {/* first, lets check if the user is signed in. */}
      {/* then we can display the email and signout button */}
      {/* otherwise, show the login button */}
      { isSignedIn ? 
        <>
          <p>hello {user?.email}</p>
          <button onClick={signout}>sign out</button> 
        </>
        : 
        <button onClick={signin}>sign in</button>
      }
      
      {/* ... rest of your App code ... */}
    </>
  )
}

That’s it! You’ve successfully added Basic authentication to your React app 🎉


Using the database

Read tables

TableComponent.jsx
// import db from useBasic() inside your React component
const { db } = useBasic()

const data = db.table('tablename').get()
// returns a promise, so you can await the response, like so: 

// --- Full Example ---- //

function App() {
  const { db } = useBasic()
  const [items, setItems] = useState([]) 
	
	const GetData = async () => { 
		const data = await db.table('tablename').get()
		setItems(data.data)
	}
	
  return (
    // render items
  )
}

Add new item

Support for types in Typescript is coming soon!

TableComponent.jsx
const data = db.table('tablename').add({ name: 'cutie'}) 
//returns promise, with newly created object

Update item

TableComponent.jsx
const data = db.table('tablename').update({ 
	id: 'ID_OF_ITEM',
	value: { name: 'super cute' }
})
//returns promise, with newly updated object

Delete item

TableComponent.jsx
const data = db.table('tablename').delete('ID_OF_ITEM')
//returns promise