@ibercore/next-auth

Next Auth Library multiple providers

Install

npm install --save @ibercore/next-auth

Client Side

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

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

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

NextAuthOptions

Notes

If you are using EmailProvider add this on you package.json

"browser": {
    "fs": false,
    "os": false,
    "path": false,
    "net": false,
    "dns": false,
    "child_process": false,
    "tls": false
}

License

MIT ©