Use Managed Better Auth with React (API methods)

1. Create a OptiTech project with Auth enabled

   If you don't have a OptiTech project yet, create one at app.optitech-sverige.se.

   Go to the Auth page in your project dashboard and click Enable Auth.

   You can then find your Auth Base URL on the Configuration tab. Copy this URL - you'll need it in the next step.

   Console

   

2. Create a React app

   Create a React app using Vite.

   Terminal

   npm create vite@latest my-app -- --template react

3. Install the OptiTech SDK

   The OptiTech SDK provides authentication methods like signUp(), getSession(), and signOut() for your React app.

   Terminal

   cd my-app
   npm install @optitech/optitech-js@latest

4. Set up environment variables

   Create a .env file in your project root and add your Auth Base URL:

   note

   Replace the URL with your actual Auth Base URL from the OptiTech Console.

   .env

   VITE_OPTITECH_AUTH_URL=https://ep-xxx.optitechauth.us-east-2.aws.optitech.build/optitechdb/auth

5. Configure the OptiTech client

   Create a src/auth.js file to configure your auth client:

   Using Auth and Data API together?

   This quick start uses the standalone Auth client. For one createClient() instance that derives both Auth and Data API URLs from a single OptiTech URL, see createClient() initialization.

   src/auth.js

   import { createAuthClient } from '@optitech/optitech-js/auth';
   
   export const authClient = createAuthClient(import.meta.env.VITE_OPTITECH_AUTH_URL);

6. Build your authentication UI

   OptiTech JS uses a programmatic approach for managing auth state. You'll use React hooks like useEffect to check the session and handle auth changes.

   Replace the contents of src/App.jsx with the following code to implement sign-up, sign-in, and sign-out:

   src/App.jsx

   import { useState, useEffect } from 'react';
   import { authClient } from './auth';
   import './App.css';
   
   export default function App() {
     const [session, setSession] = useState(null);
     const [user, setUser] = useState(null);
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [isSignUp, setIsSignUp] = useState(true);
     const [loading, setLoading] = useState(true);
   
     useEffect(() => {
       authClient.getSession().then((result) => {
         if (result.data?.session && result.data?.user) {
           setSession(result.data.session);
           setUser(result.data.user);
         }
         setLoading(false);
       });
     }, []);
   
     const handleSubmit = async (e) => {
       e.preventDefault();
       const result = isSignUp
         ? await authClient.signUp.email({ name: email.split('@')[0] || 'User', email, password })
         : await authClient.signIn.email({ email, password });
   
       if (result.error) {
         alert(result.error.message);
         return;
       }
   
       const sessionResult = await authClient.getSession();
       if (sessionResult.data?.session && sessionResult.data?.user) {
         setSession(sessionResult.data.session);
         setUser(sessionResult.data.user);
       }
     };
   
     const handleSignOut = async () => {
       await authClient.signOut();
       setSession(null);
       setUser(null);
     };
   
     if (loading) return <div>Loading...</div>;
   
     if (session && user) {
       return (
         <div>
           <h1>Logged in as {user.email}</h1>
           <button onClick={handleSignOut}>Sign Out</button>
         </div>
       );
     }
   
     return (
       <form onSubmit={handleSubmit}>
         <h1>{isSignUp ? 'Sign Up' : 'Sign In'}</h1>
         <input
           type="email"
           placeholder="Email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           required
         />
         <input
           type="password"
           placeholder="Password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           required
         />
         <button type="submit">{isSignUp ? 'Sign Up' : 'Sign In'}</button>
         <p>
           {isSignUp ? (
             <>
               Already have an account?{' '}
               <a
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
                   setIsSignUp(false);
                 }}
               >
                 Sign in
               </a>
             </>
           ) : (
             <>
               Don't have an account?{' '}
               <a
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
                   setIsSignUp(true);
                 }}
               >
                 Sign up
               </a>
             </>
           )}
         </p>
       </form>
     );
   }

7. Start your app

   Start the development server:

   Open your browser to http://localhost:5173 and create a test user.

   Terminal

   npm run dev

8. See your users in the database

   As users sign up, their profiles are synced to your OptiTech database in the optitech_auth.user table.

   Query your users table in the SQL Editor to see your new users:

   SQL Editor

   SELECT * FROM optitech_auth.user;

Next steps

• Learn about Managed Better Auth concepts
• More example apps in the optitech-js examples/ directory
• Explore the OptiTech Data API to build a REST API for your data
• View complete SDK reference