Get up and running with PersonQL in minutes.
PersonQL provides framework-specific SDKs. Choose the one that matches your stack:
npm install @personql/react
# or
yarn add @personql/react
# or
pnpm add @personql/react
npm install @personql/nextjs
npm install @personql/react-native
npm install @personql/node
npm install @personql/vanilla
Sign up at PersonQL Dashboard and create a new project to get your API key.
Add your API key to your environment variables:
PERSONQL_API_KEY=your_api_key_here
PERSONQL_BASE_URL=https://api.personql.com
import { PersonQLProvider, useAuth } from '@personql/react';
// Wrap your app with the provider
function App() {
return (
<PersonQLProvider
apiKey={process.env.PERSONQL_API_KEY}
baseURL={process.env.PERSONQL_BASE_URL}
>
<YourApp />
</PersonQLProvider>
);
}
// Use authentication in your components
function YourApp() {
const { user, signIn, signOut, isLoading } = useAuth();
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
{user ? (
<>
<h1>Welcome, {user.email}!</h1>
<button onClick={signOut}>Sign Out</button>
</>
) : (
<button onClick={() => signIn({ provider: 'google' })}>
Sign In with Google
</button>
)}
</div>
);
}
// app/layout.tsx
import { PersonQLProvider } from '@personql/nextjs';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<PersonQLProvider>
{children}
</PersonQLProvider>
</body>
</html>
);
}
Now that you have PersonQL installed and configured:
// Google OAuth
signIn({ provider: 'google' });
// GitHub OAuth
signIn({ provider: 'github' });
// Microsoft OAuth
signIn({ provider: 'microsoft' });
// Sign up
signUp({ email: 'user@example.com', password: 'secure-password' });
// Sign in
signIn({ email: 'user@example.com', password: 'secure-password' });
// Enable MFA
enableMFA({ method: 'totp' });
// Verify MFA
verifyMFA({ code: '123456' });
// Get current session
const session = useSession();
// Track custom event
session.track('button_clicked', { button: 'checkout' });