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:
npx 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 TypeScript variant.

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

​
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. You can either do this manually, or go through the CLI flow to have it automatically created for you.

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 Basic dashboard and paste it into the file.

Any changes you make to the schema in basic.config need to eventually be deployed to the Basic dashboard. Local changes would be for development purposes only.

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 the Basic dashboard. To create one, follow the instructions for signing up.

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, including the project ID and schema */}
    <BasicProvider project_id='schema.project_id' 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.

1. Create your projectUsing the API