Disclaimer: Novice User
I have successfully created a custom signin page with email and social media authentication using Next.js.
Now I would like to customize the styling by incorporating Next.js/Image to replace the submit button with a clickable icon or image that triggers the same action.
Below is the code for my fully functional signin page...
import React from 'react'
import {getProviders, signIn} from 'next-auth/react'
import { getCsrfToken } from "next-auth/react"
import styles from '../../styles/signin.module.css'
import Logo from '../../components/Logo'
export default function SignIn ({ csrfToken, providers }) {
return (
<div className={styles.content}>
<div className={styles.cardWrapper}>
<Logo className={styles.logo}/>
<div className={styles.cardContent}>
<form method="post" action="/api/auth/signin/email">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<input type="email" id="email" name="email" placeholder='Email..' />
<button className={styles.primaryBtn} type="submit">Sign in with Email</button>
</form>
<p className={styles.seperator}> Or </p>
<form method="post" action="/api/auth/signin/google">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<button className={styles.primaryBtn} type="submit">Sign in with Google</button>
</form>
</div>
</div>
</div>
)
}
export async function getServerSideProps(context) {
const csrfToken = await getCsrfToken(context)
const providers = await getProviders(context)
return {
props: { csrfToken, providers },
}
}
The Next.js/Image code implementation would resemble this...
<a>
<Image
priority="true"
src="/google_login.png"
alt="Google Login"
width="200px"
height="200px"
layout="intrinsic"
/>
</a>
UPDATE:
In a previous iteration, I used a .map method to display provider buttons as shown below...
{Object.values(providers).map((provider) => {
console.log(providers)
if (provider.name === "Email") {
return
}
return (
<div key={provider.name}>
<button onClick={() => signIn(provider.id)}>
Sign in with {provider.name}
</button>
</div>
)
})}
Both methods are functional. How can I replace the button with an image instead?
Any suggestions or ideas are welcome.
Thank you in advance