# @ibercore/next-auth

> Next Auth Library multiple providers

[![NPM](https://img.shields.io/npm/v/@ibercore/next-auth.svg)](https://www.npmjs.com/package/@ibercore/next-auth) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @ibercore/next-auth
```

## Client Side
```tsx
// pages/_app.tsx
import type { AppProps } from 'next/app'
import React, { Component } from 'react'
import { SessionProvider, useSession } from '@ibercore/next-auth'

export default function App({ Component, pageProps }: AppProps) {
  return <SessionProvider>
    <Auth>
      <Component {...pageProps} />
    </Auth>
  </SessionProvider>
}

const Auth = ({ children }: { children: any }): any => {
  const { status } = useSession()
  if (status === 'loading') return <p>Loading...</p>
  if (status === 'unauthenticated') return <SignIn />
  return children
}
```

```tsx
// pages/signin.tsx
import { useSession } from "@ibercore/next-auth"

const SignIn = () => {
    const { signIn } = useSession()
    return <div>
        {/* Create form with two inputs username & password and call on submit */}
        <button onClick={() => signIn('credentials', { username: 'test', password: 'test' })} >CREDENTIALS</button>
        <button onClick={() => signIn('facebook')}> FACEBOOK</button>
        <button onClick={() => signIn('google')}> GOOGLE</button>
    </div>
}

export default SignIn;
```

## Configure API
```ts
// pages/auth/api/[...nextauth].ts
import { NextAuth, NextAuthOptions } from "@ibercore/next-auth";
import CredentialProvider from "@ibercore/next-auth/providers/credentials";
import GoogleProvider from "@ibercore/next-auth/providers/google";
import FacebookProvider from "@ibercore/next-auth/providers/facebook";
import EmailProvider from "@ibercore/next-auth/providers/email"


export default function handler(res, req) {
    const nextAuthOptions: NextAuthOptions = {
        secret: process.env.NEXTAUTH_SECRET,
        callbacks: {
            async signIn({ session, provider }) {
                console.log("callbacks signIn", { session, provider })
            },
            async signOut({ session, provider }) {
                console.log("callbacks signOut", { session, provider })
            }
        },
        pages: {
            signIn: '/'
        },
        providers: [
            EmailProvider({
                from: process.env.EMAIL_FROM,
                server: {
                    host: process.env.EMAIL_HOST,
                    user: process.env.EMAIL_USER,
                    pass: process.env.EMAIL_PASS
                }
            }),
            CredentialProvider({
                async authorize(credentials) {
                    const user = {
                        id: '222',
                        role: 'role',
                        name: 'User',
                        lastName: 'Name',
                    }
                    if (!user) return null
                    const validate = true
                    if (!validate) return null
                    return user
                },
            }),
            GoogleProvider({
                clientId: process.env.GOOGLE_CLIENT_ID!,
                clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
            }),
            FacebookProvider({
                clientId: process.env.FACEBOOK_CLIENT_ID!,
                clientSecret: process.env.FACEBOOK_CLIENT_SECRET!,
            }),

        ]
    }

    return NextAuth(res, req, nextAuthOptions)
}

```

## Options

``` text
NextAuthOptions



```

## Notes 
If you are using EmailProvider add this on you package.json
```json
"browser": {
    "fs": false,
    "os": false,
    "path": false,
    "net": false,
    "dns": false,
    "child_process": false,
    "tls": false
}
```
## License

MIT © [](https://github.com/)