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

​
Installation

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

When prompted in the CLI, enter y for installing the vite package. Then give your project a name. Choose React as your framework. And finally choose the JavaScript variant.

You may choose to pair React with TypeScript and the library works similarly, but the example code will be in plain Javascript.

2

Install the @basictech/react library

cd project-name into your project, run npm i and install the @basictech/react library in your app:

Terminal
# first, cd into your project
cd project-name

# then, install all packages
npm i

# finally, install Basic
npm install @basictech/react

​
Adding Auth

1

Add the BasicProvider to main.jsx

Navigate to src/main.jsx, add the BasicProvider to imports, and wrap your app in it.

Replace YOUR_PROJECT_ID with your Project ID from the Basic dashboard. To create one, follow the instructions for signing up.

main.jsx
// add the BasicProvider to your existing imports
import { BasicProvider } from '@basictech/react'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    {/* Wrap your app in BasicProvider, including the project ID */}
    <BasicProvider project_id='YOUR_PROJECT_ID'>
      <App />
    </BasicProvider>
  </StrictMode>,
)
2

Add a login button to App.jsx

Now navigate to src/App.jsx and import signin, isSignedIn, and user. Vite comes with some template code, but you can replace the contents with the following:

App.jsx
import { useBasic } from '@basictech/react'
import './App.css'

function App() {
  // Import signin to enable the user to sign in
  // Import isSignedIn to check if the user is signed in
  // Import user to get the user's information once they're signed in
  const { signin, isSignedIn, user } = useBasic()

  return (
    <>
      {/* if the user isn't signed in, show the sign in button */}
      {!isSignedIn ? (
        <button onClick={signin}>Sign In</button>
      ) : (
        {/* once signed in, show their email */}
        <div>
          <p>Signed in as: {user.email}</p>
        </div>
      )}
    </>
  )
}

export default App

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. Once they’re done, they’ll be redirected back to your app and see their email displayed.

3

Add a logout button

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

App.jsx
import { useBasic } from '@basictech/react'
import './App.css'

function App() {
  // Add signout to the imports
  const { signin, isSignedIn, user, signout } = useBasic()

  return (
    <>
      {isSignedIn ? (
        <div>
          <p>Signed in as: {user.email}</p>
          {/* Add a button to sign out */}
          <button onClick={signout}>Sign Out</button>
        </div>
      ) : (
        <button onClick={signin}>Sign In</button>
      )}
    </>
  )
}

export default App

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

​
Using the database

You can use the React SDK to read and write to the user’s database. Checkout the React SDK docs to get started.

Sign upUsing the API