@ibercore/next-auth

> Next Auth Library multiple providers

![NPM](https://www.npmjs.com/package/@ibercore/next-auth) ![JavaScript Style Guide](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 
    
      
    
  
}
const Auth = ({ children }: { children: any }): any => {
  const { status } = useSession()
  if (status === 'loading') return 
Loading...

  if (status === 'unauthenticated') return 
  return children
}

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

const SignIn = () => { const { signIn } = useSession() return


        {/ Create form with two inputs username & password and call on submit /}

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/)

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

}

const Auth = ({ children }: { children: any }): any => {
const { status } = useSession()
if (status === 'loading') return

if (status === 'unauthenticated') return
return children
}

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

const SignIn = () => {
    const { signIn } = useSession()
    return


        {/ Create form with two inputs username & password and call on submit /}

}

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)
}