> ## Documentation Index
> Fetch the complete documentation index at: https://docs.basic.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# ⚡️ Quickstart existing React app

> Using the @basictech/react library with your React project

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

<Info> This library is for client-side React. For Next.js applications, see the [@basictech/nextjs documentation](/basic-nextjs/basic-nextjs-sdk). </Info>

# Installation

<Steps>
  <Step title="Install the @basictech/react library">
    `cd project-name` into your project, run `npm i` and install the `@basictech/react` library in your app:

    ```bash Terminal theme={null}
    # first, cd into your project
    cd project-name

    # then, install all packages
    npm i

    # finally, install Basic
    npm install @basictech/react
    ```
  </Step>
</Steps>

# Set up basic.config

<Steps>
  <Step title="Create a basic.config.ts file">
    Create a new file called `basic.config.ts` in the root of your project.
  </Step>

  <Step title="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](https://admin.basic.tech) (see [Admin & project setup](/get-started/adminportal#create-your-schema)) 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.

    ```ts basic.config.ts theme={null}
    export const schema = {
      project_id: 'YOUR_PROJECT_ID',
      version: 0,
      tables: {
        table_name: {
          type: 'collection',
          fields: {
            field_name: {
              type: 'string',
              indexed: true,
            }
          }
        }
      }
    }
    ```
  </Step>
</Steps>

# Adding Auth

<Steps>
  <Step title="Add the BasicProvider to main.tsx">
    Navigate to `src/main.tsx`, add the BasicProvider to imports, and wrap your app in it.
    <Info>Replace `YOUR_PROJECT_ID` with your project ID from [admin.basic.tech](https://admin.basic.tech). New to Basic? Follow [Admin & project setup](/get-started/adminportal).</Info>

    ```tsx main.tsx theme={null}
    // 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>,
    )
    ```
  </Step>

  <Step title="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:

    ```tsx App.tsx theme={null}
    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](http://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.
  </Step>

  <Step title="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:

    ```tsx App.tsx theme={null}
    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 🎉
  </Step>
</Steps>

***

# Using the database

You can use the React SDK to read and write to the user's database. Checkout the [React SDK docs](/sdk-reference/react-components) to get started.