🔑 Using Auth.js

Shiply uses Auth.js to authenticate users. You can configure it in the /src/lib/next-auth.ts and /auth.config.ts

Let's dive into using Auth.js for Magic Link🔗 and Credential login methods! ✨

Signin In with Auth.js

To initiate a signin, simply trigger the authentication process with a click! Use signIn('...') to make it happen.

Example Signin Button
1 import { signIn } from 'next-auth/react';
2 
3 const handleMagicLinkLogin = () => {
4    signIn('...');
5  };
6 
7 <button onClick={handleMagicLinkLogin}>Sign</button>

Page Authentication

Wrap your pages with AuthLayout or DataLayout components to control access:

  • AuthLayout: Pages wrapped with AuthLayout are publicly available.
    app/layout.tsx
    1 export default function Layout({children}: Readonly<{
    2  children: React.ReactNode;
    3  }>) {
    4    return (
    5     <AuthLayout>
    6             {children}
    7     </AuthLayout>
    8   );
    9 }
  • DataLayout: Pages wrapped with DataLayout require authentication.
    app/dashboard/layout.tsx
    1 export default function Layout({children}: Readonly<{
    2  children: React.ReactNode;
    3  }>) {
    4    return (
    5     <DataLayout>
    6             {children}
    7     </DataLayout>
    8   );
    9 }
That's it! your app now have seamless authentication experience.🚀