Using with React
Using the @basictech/react library with your React project
Authentication with React
Create a new React project
If you don’t have one already, create a new React project:
# create a new vite project:
npm create vite@latest
# select the React + Javascript template in the Vite prompts
Otherwise, open your existing project.
Install the @basictech/react library
Install the @basictech/react library in your app:
npm install @basictech/react
Add the BasicProvider to main.jsx
// add the BasicProvider to your existing imports
import { BasicProvider } from '@basictech/react'
// wrap your app in BasicProvider, including the project id
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BasicProvider project_id='YOUR_PROJECT_ID'>
<App />
{/* rest of your code ... */}
</BasicProvider>
</React.StrictMode>,
)
Add auth to your project
In App.jsx, import the useAuth hook:
// add the useBasic react hook to your existing imports
import { useBasic } from '@basictech/react'
function App() {
// import the signin function at the top of your App function
const { signin } = useBasic()
// ... rest of your App code ...
}
Create a login button
function App() {
const { signin } = useBasic()
// other existing code...
return (
<>
{/* add a button, calling the signin hook */}
<button onClick={signin}>sign in</button>
{/* ... rest of your App code ... */}
</>
)
}
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.
(Optional) Display the user email
Import user from the useBasic hook:
function App() {
// add "user" to the useBasic hook
const { signin, user} = useBasic()
// other existing code...
return (
<>
<button onClick={signin}>sign in</button>
{/* display the user email */}
<p>hello {user?.email}</p>
{/* ... rest of your App code ... */}
</>
)
}
Add a logout function
Use the isSignedIn hook to check if the user is logged in, and the signout function to sign out the user:
function App() {
// add "isSignedIn" and "signout" to the useBasic hook
const { signin, user, isSignedIn, signout} = useBasic()
// other existing code...
return (
<>
{/* first, lets check if the user is signed in. */}
{/* then we can display the email and signout button */}
{/* otherwise, show the login button */}
{ isSignedIn ?
<>
<p>hello {user?.email}</p>
<button onClick={signout}>sign out</button>
</>
:
<button onClick={signin}>sign in</button>
}
{/* ... rest of your App code ... */}
</>
)
}
That’s it! You’ve successfully added Basic authentication to your React app 🎉
Using the database
Read tables
// import db from useBasic() inside your React component
const { db } = useBasic()
const data = db.table('tablename').get()
// returns a promise, so you can await the response, like so:
// --- Full Example ---- //
function App() {
const { db } = useBasic()
const [items, setItems] = useState([])
const GetData = async () => {
const data = await db.table('tablename').get()
setItems(data.data)
}
return (
// render items
)
}
Add new item
Support for types in Typescript is coming soon!
const data = db.table('tablename').add({ name: 'cutie'})
//returns promise, with newly created object
Update item
const data = db.table('tablename').update({
id: 'ID_OF_ITEM',
value: { name: 'super cute' }
})
//returns promise, with newly updated object
Delete item
const data = db.table('tablename').delete('ID_OF_ITEM')
//returns promise