Redirect logged in users back to the page they were on (#9)

Signed-off-by: miam-miam100 <[email protected]>

src/app/(routes)/login-redirect/route.ts

@@ -0,0 +1,14 @@
+import { cookies } from 'next/headers'
+
+export async function GET(): Promise<Response> {
+  const redirect = cookies().get('login-redirect')
+
+  let redirectUrl = process.env.NEXT_PUBLIC_SERVER_URL
+
+  if (redirect) {
+    redirectUrl = new URL(redirect.value, process.env.NEXT_PUBLIC_SERVER_URL).toString()
+    cookies().delete('login-redirect')
+  }
+
+  return Response.redirect(redirectUrl)
+}

src/app/(routes)/login/route.ts

@@ -0,0 +1,11 @@
+import { cookies } from 'next/headers'
+
+export async function GET(req: Request): Promise<Response> {
+  const { searchParams } = new URL(req.url)
+  const redirect = searchParams.get('redirect')
+  if (redirect) {
+    cookies().set('login-redirect', redirect, { maxAge: 60 * 5, path: '/', httpOnly: true })
+  }
+
+  return Response.redirect(`${process.env.NEXT_PUBLIC_SERVER_URL}/oauth2/authorize`)
+}

src/payload/components/BeforeLogin/index.tsx

@@ -1,16 +1,14 @@
 import React from 'react'
+import { Button } from 'payload/components'
 
-const BeforeLogin: React.FC = () => {
+const OAuthButton: React.FC = () => {
   return (
-    <div>
-      <p>
-        <b>Welcome to your dashboard!</b>
-        {' This is where site admins will log in to manage your website. Users will need to '}
-        <a href={`${process.env.PAYLOAD_PUBLIC_SERVER_URL}/login`}>log in to the site instead</a>
-        {' to access their user account, comment history, and more.'}
-      </p>
+    <div style={{ marginBottom: 20 }} className="custom">
+      <Button el="anchor" url="/login?redirect=/admin">
+        Sign in with oAuth
+      </Button>
     </div>
   )
 }
 
-export default BeforeLogin
+export default OAuthButton

src/payload/payload.config.ts

@@ -34,7 +34,7 @@ import Tickets from './collections/Tickets'
 import Users from './collections/Users'
 import Votes from './collections/Votes'
 import BeforeDashboard from './components/BeforeDashboard'
-import BeforeLogin from './components/BeforeLogin'
+import OAuthButton from './components/BeforeLogin'
 import { seed } from './endpoints/seed'
 import { Footer } from './globals/Footer'
 import { Header } from './globals/Header'
@@ -53,9 +53,6 @@ export default buildConfig({
     user: Users.slug,
     bundler: webpackBundler(), // bundler-config
     components: {
-      // The `BeforeLogin` component renders a message that you see while logging into your admin panel.
-      // Feel free to delete this at any time. Simply remove the line below and the import `BeforeLogin` statement on line 15.
-      beforeLogin: [BeforeLogin],
       // The `BeforeDashboard` component renders the 'welcome' block that you see after logging into your admin panel.
       // Feel free to delete this at any time. Simply remove the line below and the import `BeforeDashboard` statement on line 15.
       beforeDashboard: [BeforeDashboard],
@@ -175,9 +172,12 @@ export default buildConfig({
           email: sotonData.mail,
         }
       },
+      components: {
+        Button: OAuthButton,
+      },
       userCollection: Users,
       subField: { name: 'username' },
-      successRedirect: '/',
+      successRedirect: '/login-redirect',
       sessionOptions: {
         resave: false,
         saveUninitialized: false,