Skip to main content
In this guide, you will:
  1. Install the Basic React SDK into an existing React project
  2. Connect to a Basic project and customize the schema
  3. Add sign in and sign out functionality
This library is for client-side React. For Next.js applications, see the @basictech/nextjs documentation.

​
Installation

1

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

​
Set up basic.config

1

Create a basic.config.ts file

Create a new file called basic.config.ts in the root of your project.
2

Customize the config

Add your project ID to the basic.config.ts file, and customize the schema in the file. You can copy your schema from the admin console (see Admin & project setup) and paste it into the file.Any changes you make to the schema in basic.config should eventually match the schema published for your project in the admin console. Local edits are for development until you deploy or sync the canonical schema.
basic.config.ts
export const schema = {
  project_id: 'YOUR_PROJECT_ID',
  version: 0,
  tables: {
    table_name: {
      type: 'collection',
      fields: {
        field_name: {
          type: 'string',
          indexed: true,
        }
      }
    }
  }
}

​
Adding Auth

1

Add the BasicProvider to main.tsx

Navigate to src/main.tsx, add the BasicProvider to imports, and wrap your app in it.
Replace YOUR_PROJECT_ID with your project ID from admin.basic.tech. New to Basic? Follow Admin & project setup.
main.tsx
// add the BasicProvider to your existing imports
import { BasicProvider } from '@basictech/react'
import { schema } from '../basic.config'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    {/* Wrap your app in BasicProvider with your schema */}
    <BasicProvider schema={schema}>
      <App />
    </BasicProvider>
  </StrictMode>,
)
2

Add a login button to App.tsx

Now navigate to src/App.tsx and import signIn, isSignedIn, and user. Vite comes with some template code, but you can replace the contents with the following:
App.tsx
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.tsx
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.