Framework Integrations

npm install @optare/nextjs

// app/api/auth/[...optare]/route.ts
import { optareHandler } from '@optare/nextjs'
 
export const { GET, POST } = optareHandler({
  clientId: process.env.OPTARE_CLIENT_ID,
  clientSecret: process.env.OPTARE_CLIENT_SECRET,
  redirectUri: process.env.OPTARE_REDIRECT_URI
})

// app/dashboard/page.tsx
import { getSession } from '@optare/nextjs'
import { redirect } from 'next/navigation'
 
export default async function Dashboard() {
  const session = await getSession()
  
  if (!session) {
    redirect('/login')
  }
 
  return <div>Welcome {session.user.name}</div>
}

npm install @optare/react

// App.tsx
import { OptareProvider } from '@optare/react'
 
function App() {
  return (
    <OptareProvider
      clientId={process.env.REACT_APP_OPTARE_CLIENT_ID}
      redirectUri={window.location.origin + '/callback'}
    >
      <YourApp />
    </OptareProvider>
  )
}

import { useAuth } from '@optare/react'
 
function Profile() {
  const { user, signOut, isLoading } = useAuth()
 
  if (isLoading) return <div>Loading...</div>
  if (!user) return <div>Not authenticated</div>
 
  return (
    <div>
      <p>Welcome {user.name}</p>
      <button onClick={signOut}>Sign Out</button>
    </div>
  )
}

npm install @optare/remix

// app/services/auth.server.ts
import { OptareStrategy } from '@optare/remix'
import { Authenticator } from 'remix-auth'
 
export const authenticator = new Authenticator(sessionStorage)
 
authenticator.use(
  new OptareStrategy(
    {
      clientID: process.env.OPTARE_CLIENT_ID,
      clientSecret: process.env.OPTARE_CLIENT_SECRET,
      callbackURL: '/auth/callback'
    },
    async ({ profile }) => {
      return profile
    }
  )
)

// app/routes/dashboard.tsx
import { authenticator } from '~/services/auth.server'
 
export async function loader({ request }: LoaderFunctionArgs) {
  const user = await authenticator.isAuthenticated(request, {
    failureRedirect: '/login'
  })
  
  return json({ user })
}

npm install @optare/express

import { optareAuth } from '@optare/express'
 
const auth = optareAuth({
  clientId: process.env.OPTARE_CLIENT_ID,
  clientSecret: process.env.OPTARE_CLIENT_SECRET
})
 
app.use('/api', auth.required, (req, res) => {
  res.json({ user: req.user })
})

npm install @optare/vue

// main.ts
import { createOptare } from '@optare/vue'
 
const optare = createOptare({
  clientId: import.meta.env.VITE_OPTARE_CLIENT_ID,
  redirectUri: window.location.origin + '/callback'
})
 
app.use(optare)

<script setup>
import { useAuth } from '@optare/vue'
 
const { user, signIn, signOut, isAuthenticated } = useAuth()
</script>
 
<template>
  <div v-if="isAuthenticated">
    <p>Welcome {{ user.name }}</p>
    <button @click="signOut">Sign Out</button>
  </div>
</template>