@libreapps/auth 3.0.1

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @libreapps/auth@3.0.0 build /Users/jetstart/dev/libre-apps/ui-main/pkg/auth
+> tsc --outDir dist --declaration --emitDeclarationOnly false --module ESNext --esModuleInterop true --skipLibCheck true --sourceMap true
+

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @libreapps/auth
+
+## 3.0.1
+
+### Patch Changes
+
+- Reverted package scope to @libreapps.
+- Updated dependencies
+  - @libreapps/ui@5.4.1
+
+## 3.0.0
+
+### Minor Changes
+
+- 6f41d89: Initial release of LibreApps UI packages to NPM
+
+### Patch Changes
+
+- Updated dependencies [6f41d89]
+  - @libreapps/ui@5.4.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LibreApps.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# LibreApps Auth
+
+## Initialization
+
+Follow these steps to initialize authentication with LibreApps Auth for your project:
+
+1. Install package with `pnpm i @libreapps/auth`
+
+2. Create custom Header component that includes an `AuthWidget` from @libreapps/auth. See example in [luxdefi/sites repo](https://github.com/luxdefi/sites/tree/main/sites/credit/src/components/header)
+
+3. Edit root layout component
+``` typescript
+// ... other imports
+
+import { AuthServiceProvider } from '@libreapps/auth/service'
+import { getUserServerSide } from '@libreapps/auth/server'
+import type { AuthServiceConf } from '@libreapps/auth/types'
+
+// custom header with AuthWidget
+import Header from '@/components/header'
+
+// ...other code
+
+const RootLayout: React.FC<PropsWithChildren> = async ({
+  children
+}) =>  {
+  const currentUser = await getUserServerSide()
+
+  return (
+    <AuthServiceProvider user={currentUser} conf={{} as AuthServiceConf}>
+      <RootLayoutCommon siteDef={siteDef} header={false} >
+        <Header siteDef={siteDef}/>
+        {children}
+      </RootLayoutCommon>
+    </AuthServiceProvider>
+  )
+}
+export default RootLayout
+```
+
+4. Create `/api/auth/login` route.
+``` Typescript
+import { NextRequest } from 'next/server'
+
+import { handleLoginApiRequest } from '@libreapps/auth/server'
+
+export async function POST(request: NextRequest) {
+  return handleLoginApiRequest(request)
+}
+```
+
+5. Create `/api/auth/logout` route.
+``` Typescript
+import { handleLogoutApiRequest } from '@libreapps/auth/server'
+
+export async function GET() {
+  return handleLogoutApiRequest()
+}
+```
+
+6. Create `/login` route that uses `LoginComponent` from @libreapps/auth. See example in [luxdefi/sites repo](https://github.com/luxdefi/sites/tree/main/sites/credit/src/app/login)

package/components/auth-widget.tsx

@@ -0,0 +1,110 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { 
+  Button, 
+  LinkElement, 
+  Popover, 
+  PopoverContent, 
+  PopoverTrigger, 
+  Separator 
+} from '@libreapps/ui/primitives'
+
+import type { LinkDef } from '@libreapps/ui/types'
+import { cn } from '@libreapps/ui/util'
+
+import { useAuth } from '../service'
+
+import Ethereum from '../icons/ethereum'
+
+const AuthWidget: React.FC<{
+    /** Does not show the 'login' button when no auth user. 
+     * ie, Only shows the profile widget (when there's an auth user)
+     */
+  noLogin?: boolean
+  className?: string
+    /** Overrides default of navigating to '/login' route. 
+     * eg, if client code provides it's own ogin form
+     *  */
+  handleLogin?: () => void
+}> = observer(({
+  noLogin=false,
+  handleLogin,
+  className
+}) => {
+
+  const auth = useAuth()
+
+    // This safegaurds against a crash in the rare case
+    // that multiple inistances of auth module are in play.
+    // We safegaurd agains this in the by loading peer Deps from
+    // the root in host mono repos, but this is another layer.
+    // Also, this allows sites to opt-in to showing an auth widget without
+    // configuration, by just providing the context.
+  if (!auth || noLogin) {
+    return null
+  }
+  
+    // If that is the case, the widget will always show the 'login' 
+    // button regardless of status.
+  if (!auth.loggedIn && typeof window !== 'undefined') {
+
+    return (handleLogin ? (
+      <Button 
+        variant='primary' 
+        className='h-8 w-fit !min-w-0'
+        onClick={handleLogin} 
+      >
+        Login
+      </Button>
+    ) : (
+      <LinkElement
+        def={{
+          href: `${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}?redirectUrl=${window.location.href}`,
+          title: 'Login',
+          variant: 'primary',
+          newTab: false
+        } satisfies LinkDef}
+        className='h-8 w-fit !min-w-0'
+      />
+    ))
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button 
+          variant="outline" 
+          size='icon' 
+          className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
+        >{auth.user?.email[0]}</Button>
+      </PopoverTrigger>
+      <PopoverContent className='bg-level-0'>
+        <div className="grid gap-4">
+          <div className="space-y-2 truncate">
+            {auth.user?.displayName ? (
+              <>
+                <h4 className="font-medium leading-none truncate">{auth.user.displayName}</h4>
+                <p className="text-sm opacity-50 truncate">{auth.user.email}</p>
+              </>
+            ) : (
+              <h4 className="font-medium leading-none truncate">{auth.user?.email}</h4>
+            )}
+            {auth.user?.walletAddress ? (
+              <p className="text-sm opacity-50 truncate">{auth.user.walletAddress}</p>
+            ) : (
+              <Button variant="outline" className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
+                <Ethereum height={20}/>Connect your wallet
+              </Button>
+            )}
+          </div>
+          <Separator />
+          <Button variant="outline" onClick={auth.logout.bind(auth)}>Logout</Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+})
+
+export default AuthWidget

package/components/email-password-form.tsx

@@ -0,0 +1,96 @@
+// @ts-nocheck 
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import { useForm } from 'react-hook-form'
+ 
+import {
+  Button,
+  Input
+} from '@libreapps/ui/primitives'
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@libreapps/ui/form'
+
+import { cn } from '@libreapps/ui/util'
+ 
+const formSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(2, 'Password must be at least 2 characters'),
+})
+ 
+const EmailPasswordForm: React.FC<{
+  onSubmit: (email: string, password: string) => void 
+  isLoading: boolean
+  className?: string
+  inputClx?: string
+  prompt?: string
+}> = ({
+  onSubmit, 
+  isLoading, 
+  className,
+  inputClx,
+  prompt='Login'
+}) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  })
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(({email, password}) => onSubmit(email, password))}
+        className={cn('text-left', className)}
+      >
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem className='space-y-1'>
+              <FormControl>
+                <Input
+                  {...field}
+                  className={inputClx}
+                  placeholder='Email'
+                  disabled={isLoading}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='password'
+          render={({ field }) => (
+            <FormItem className='space-y-1'>
+              <FormControl>
+                <Input
+                  type='password'
+                  {...field}
+                  className={inputClx}
+                  placeholder='Password'
+                  disabled={isLoading}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type='submit' className='w-full' disabled={isLoading}>{prompt}</Button>
+      </form>
+    </Form>
+  )
+}
+
+export default EmailPasswordForm

package/components/index.ts

@@ -0,0 +1,4 @@
+export { default as LoginPanel } from './login-panel'
+export { default as EmailPasswordForm } from './email-password-form'
+export { default as AuthWidget } from './auth-widget'
+export { default as SignupPanel } from './signup-panel'

package/components/login-panel.tsx

@@ -0,0 +1,207 @@
+'use client'
+import { useState, useEffect, type PropsWithChildren } from 'react'
+import { useRouter } from 'next/navigation'
+import { observer } from 'mobx-react-lite'
+import Link from 'next/link'
+
+import { ApplyTypography, Button, Separator, toast, Toaster } from '@libreapps/ui/primitives'
+import { cn } from '@libreapps/ui/util'
+
+import { useAuth, type AuthProvider } from '../service'
+import { Facebook, Google, GitHub } from '../icons'
+import EmailPasswordForm from './email-password-form'
+import { sendGAEvent } from '../util/analytics'
+
+
+const ProviderLoginButton: React.FC<PropsWithChildren & {
+  provider: AuthProvider,
+  loginWithProvider: (provider: AuthProvider) => Promise<void>,
+  isLoading: boolean
+}> = ({
+  provider,
+  loginWithProvider,
+  isLoading,
+  children
+}) => {
+
+    return (
+      <Button
+        onClick={() => {loginWithProvider(provider)}}
+        className='w-full mx-auto flex items-center gap-2'
+        disabled={isLoading}
+        variant='outline'
+      >
+        {children}
+      </Button>
+    )
+  }
+
+const LoginPanel: React.FC<PropsWithChildren & {
+  redirectUrl?: string,
+  getStartedUrl?: string,
+  className?: string,
+  inputClx?: string,
+  noHeading?: boolean
+  onLoginChanged?: (token: string) => void
+  termsOfServiceUrl?: string
+  privacyPolicyUrl?: string
+  setIsLogin?: React.Dispatch<React.SetStateAction<boolean>>
+}> = observer(({
+  children,
+  redirectUrl,
+  getStartedUrl,
+  className,
+  inputClx,
+  noHeading,
+  onLoginChanged,
+  termsOfServiceUrl,
+  privacyPolicyUrl,
+  setIsLogin
+}) => {
+
+  const router = useRouter()
+  const auth = useAuth()
+  const [isLoading, setIsLoading] = useState(false)
+  const [getStartUrl, setGetStartUrl] = useState('')
+
+  const succeed = async (loginMethod: AuthProvider | 'email' | null) => {
+
+    if (loginMethod) {
+      sendGAEvent('login', { method: loginMethod })
+    }
+
+      // If a callback is provided, don't redirect.
+      // Assume host code is handling (eg, mobile menu)
+    if (onLoginChanged) {
+      const res = await fetch(
+        '/api/auth/generate-custom-token',
+        { method: 'POST' }
+      ).then(res => res.json())
+      onLoginChanged(res.token?.token ?? null)
+    }
+    else if (redirectUrl) {
+        // TODO :aa shouldn't the token thing happen in this case too??
+      router.push(redirectUrl)
+    }
+  }
+
+  const loginWithEmailPassword = async (email: string, password: string) => {
+    setIsLoading(true)
+    try {
+      const res = await auth.loginEmailAndPassword(email, password)
+      if (res.success) { 
+        succeed('email'); toast.success(res.message) 
+      }
+      else { 
+        toast.error(res.message) 
+      }
+    }
+    catch (e) {
+      toast('User with this email already signed up using a different provider')
+    }
+    setIsLoading(false)
+  }
+
+  // const loginWithEthereum = async () => {
+  //   setIsLoading(true)
+  //   try {
+  //     const res = await signInWithEthereum()
+  //     if (res.success && res.user) {
+  //       setUser({email: res.user?.email, displayName: res.user?.displayName, walletAddress: res.user?.walletAddress})
+  //       if (redirectUrl) {
+  //         router.push(redirectUrl)
+  //       }
+  //     }
+  //   } catch (e) {
+  //     toast({title: 'No Ethereum provider found'})
+  //   }
+  //   setIsLoading(false)
+  // }
+
+  const loginWithProvider = async (provider: AuthProvider) => {
+    setIsLoading(true)
+    const res = await auth.loginWithProvider(provider)
+    if (res.success) { 
+      succeed(provider) 
+    }
+    setIsLoading(false)
+  }
+
+  const logout = async () => {
+    setIsLoading(true)
+    const res = await auth.logout()
+    if (res.success) { 
+      succeed(null) 
+    }
+    setIsLoading(false)
+  }
+
+  const handleOnClick = () => {
+    if (setIsLogin) {
+      setIsLogin(false)
+    }
+  }
+
+  const generateUsernameFromEmail = (email: string) => {
+    const emailPrefix = email.split('@')[0]; // Get the part before the @ symbol
+    const randomSuffix = Math.random().toString(36).substring(2, 8); // Generate a random string
+    return `${emailPrefix}_${randomSuffix}`;
+}
+
+  useEffect(() => {
+    if (auth.loggedIn) {
+      const username = auth.user?.email
+      if (username) setGetStartUrl('https://' + generateUsernameFromEmail(username) + '.' + getStartedUrl)
+    }
+  }, [auth])
+
+  return (
+    <ApplyTypography className={cn('w-full flex flex-col text-center !gap-3 LOGIN_OUTER', className)}>
+      {auth.loggedIn && !redirectUrl ? (
+        <>
+          <h4>Welcome!</h4>
+          {auth.user && (<> {/*  this means the libreapps user isn't loaded yet ...*/}
+            <p>You are signed in as {auth.user?.displayName ?? auth.user?.email}</p>
+            <div className='flex flex-col md:flex-row gap-3 items-center justify-center'>
+              <Button variant='primary' onClick={() => router.push(getStartUrl)} className='w-full'>GET STARTED</Button>
+              <Button onClick={logout} variant='outline' disabled={isLoading} className='w-full'>Sign Out</Button>
+            </div>
+          </>)}
+        </>
+      ) : (
+        <>
+          {!noHeading && (
+            <h4 className='text-center'>Login</h4>
+          )}
+          {children}
+          <EmailPasswordForm onSubmit={loginWithEmailPassword} isLoading={isLoading} className='mb-4' inputClx={inputClx} />
+
+          <div className='flex flex-row gap-4 justify-center'>
+            <div className='text-muted-2 text-sm'>Don't have an account?</div>
+            <button className='bg-transparent text-foreground text-sm' onClick={handleOnClick}>Sign Up</button>
+          </div>
+
+          <div className='flex gap-2 whitespace-nowrap items-center my-1 sm:my-3 text-xs text-muted'>
+            <Separator className='grow w-auto' /><div className='shrink-0 mx-1'>or continue with</div><Separator className='grow w-auto' />
+          </div>
+
+          {/* <Button onClick={loginWithEthereum} className='w-full mx-auto flex items-center gap-2' disabled={isLoading}>
+            <Ethereum height={20}/>Login with your wallet
+          </Button> */}
+          <ProviderLoginButton provider='google' isLoading={isLoading} loginWithProvider={loginWithProvider}>
+            <Google height={20} />Google
+          </ProviderLoginButton>
+          <ProviderLoginButton provider='facebook' isLoading={isLoading} loginWithProvider={loginWithProvider}>
+            <Facebook height={20} />Facebook
+          </ProviderLoginButton>
+          <ProviderLoginButton provider='github' isLoading={isLoading} loginWithProvider={loginWithProvider}>
+            <GitHub height={20} />Github
+          </ProviderLoginButton>
+          <p className='text-sm text-muted-2'>By logging in, you agree to our <Link href={termsOfServiceUrl ?? ''} target='_blank'>Terms of Service</Link> and <Link href={privacyPolicyUrl ?? ''} target='_blank'>Privacy Policy</Link>.</p>
+        </>
+      )}
+    </ApplyTypography>
+  )
+})
+
+export default LoginPanel