In this guide, you will:

Create a new project using create-lofi-app
Customize the homepage and schema
Connect to a Basic project
Add sign in and sign out functionality

installation

Create a new project

Terminal

# create a new project:
npx create-lofi-app

When prompted in the CLI, enter y for installing the vite package. Then give your project a name. And finally choose the Basic + Tailwind variant.

running the app

install npm packages

cd project-name into your project, run npm i, and start your server with npm run dev:

Terminal

# first, cd into your project
cd project-name

# then, install all packages
npm i

# start your server
npm run dev

You’ll now be able to navigate to http://localhost:5173 and see the app running as below:

customizing the app

change the homepage

Let’s delete the existing code and simplify it by printing “my lofi app”.

App.tsx

- import { useBasic, useQuery } from '@basictech/react'
import './App.css'

- const deleteCursorIcon = `url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2MEE1RkEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIzIDYgNSA2IDIxIDYiPjwvcG9seWxpbmU+PHBhdGggZD0iTTE5IDZ2MTRhMiAyIDAgMCAxLTIgMkg3YTIgMiAwIDAgMS0yLTJWNm0zIDBWNGEyIDIgMCAwIDEgMi0yaDRhMiAyIDAgMCAxIDIgMnYyIj48L3BhdGg+PC9zdmc+),auto`

function App() {
-  const { db } = useBasic()
-  const emojis = useQuery(() => db.collection('emojis').getAll())

return (
  <>
+     <h1>my lofi app</h1>

-     <h1 className="text-4xl font-bold font-mono">create-lofi-app</h1>
-     <div className="card">
-       <button onClick={() => db.collection('emojis').add({ value: `${['✨', '🌟', '💫', '⭐', '🌠', '🎇', '🎆', '🌈', '🌸', '🌺', '🍀', '🎨', '🎭', '🎪', '🎡', '🎢', '🎠'][Math.floor(Math.random() * 17)]}` })}>
-         new ✨
-       </button>
-       <div className="flex flex-row gap-4 justify-center min-h-[60px] ">
-         {emojis?.map((e: { id: string, value: string }) => (
-           <div key={e.id} className={`rounded-md p-2 m-2`} style={{ cursor: deleteCursorIcon }} onClick={() => db.collection('emojis').delete(e.id)}>
-             {e.value}
-           </div>
-         ))}
-       </div>
-     </div>
- 
-     <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-32 max-w-5xl mx-auto px-4">
-       <a href="https://docs.basic.tech" target="_blank" className="card-link group">
-         <h2 className="card-title">Basic Docs</h2>
-         <p className="card-description">
-           Auth, sync, and database
-         </p>
-       </a>
- 
-       <a href="https://vite-pwa-org.netlify.app/" target="_blank" className="card-link group">
-         <h2 className="card-title">PWA Reference</h2>
-         <p className="card-description">
-           Enable offline capabilities
-         </p>
-       </a>
- 
-       <a href="https://tailwindcss.com/docs" target="_blank" className="card-link group">
-         <h2 className="card-title">Tailwind</h2>
-         <p className="card-description">
-           Styling framework
-         </p>
-       </a>
-     </div>
    </>
  )
}

export default App

update the schema

set up the schema based on your project needs and as per the schema docs.

basic.config.ts

export const schema = {
  project_id: '',
  version: 0,
  tables: {
+    your_table_name: {
+      type: 'collection',
+      fields: {
+        your_field_name: {
+          type: 'string',
+        },
+      },
-    emojis: {
-      type: 'collection',
-      fields: {
-        value: {
-          type: 'string',
-        },
-      },
-    },
  },
}

You’re ready to test and develop your app locally!

testing sync and Auth

You can continue to test the app locally without the following steps, but if you wish to test sync and Auth, you would need to create a Basic project and connect it to the app.

create and connect to a Basic project

You can use the Basic CLI to create a new project (the basic init command will automatically update the basic.config.ts file with the project_id). You will need to basic push to update the version number in the basic.config.ts file.…or use the Basic dashboard to create and connect to a new Basic project (make sure to update the basic.config.ts file with the project_id). You will need to manually update the version number in the basic.config.ts file to match the version number in your Basic admin project dashboard.

basic.config.ts

export const schema = {
  project_id: 'Update this with YOUR_PROJECT_ID',
  version: 'your updated schema version',
  tables: {
    ...
  }
}

Add a login button to App.tsx

Now navigate to src/App.tsx and import signin, isSignedIn, and user.

App.tsx

/// add back the UseBasic import
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.

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 documentation to read and write to the user’s database. Checkout the React SDK docs to get started.

React Guide

Guides

SDK Reference

⚡️ Quickstart new React project

installation

running the app

customizing the app

testing sync and Auth

Using the database

​installation

​running the app

​customizing the app

​testing sync and Auth

​Using the database

installation

running the app

customizing the app

testing sync and Auth

Using the database