{"id":7594,"date":"2026-08-08T17:40:51","date_gmt":"2026-08-08T08:40:51","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=7594"},"modified":"2026-08-10T09:32:44","modified_gmt":"2026-08-10T00:32:44","slug":"nextjs-gotosocial-nextauth","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/08\/08\/nextjs-gotosocial-nextauth\/","title":{"rendered":"[nextjs]Gotosocial + NextAuth"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb gotosocial\uc740 \uae00\uc4f0\uae30 UI\ub97c \uc9c0\uc6d0\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
GoToSocial does not support a post-writing UI.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uadf8\ub798\uc11c \uae00\uc744 \uc791\uc131\ud558\uace0 \uc218\uc815\ud558\uace0 \uc0ad\uc81c\ud558\uae30\uc704\ud574\uc11c\ub294 \ubcc4\ub3c4\uc758 \uc571\uc774\ub098 \uc6f9\uc0ac\uc774\ud2b8\ub97c \uc774\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.
Therefore, you need to use a separate app or website to create, edit, and delete posts.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb Tusky(\ubaa8\ubc14\uc77c)\ub098 Pinafore(\uc6f9\uc0ac\uc774\ud2b8)\ub4f1\uc744 \uc774\uc6a9\ud558\uba74 \uae00\uc744 \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can write posts using apps like Tusky(mobile) or Pinafore.(website)<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc5ec\uae30\uc11c\ub294 nextjs\uc758 gotosocial\uc11c\ubc84\uc758 nextauth\uc778\uc99d\uacfc \uc11c\ubc84\uc758 \uae00\uc744 \uc77d\uace0 \uc0ad\uc81c\ud558\ub294 \uae30\ub2a5\uc5d0 \ub300\ud574\uc11c \uc0b4\ud3b4 \ubd05\ub2c8\ub2e4.
Here, we examine NextAuth authentication for the GoToSocial server within a Next.js application, as well as the functionality for reading and deleting posts on the server.<\/p>\n\n\n\n

\ud83d\udcc1 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \/ Project Structure<\/p>\n\n\n\n

myapp9\/\n\u251c\u2500 auth.ts                               <- \uc778\uc99d \uc124\uc815 \/ Authentication Settings\n\u251c\u2500 app\/api\/auth\/[...nextauth]\/route.ts   <- \uc778\uc99d \uc2e4\ud589 \/ Authentication Settings\n\u251c\u2500 lib\/gotosocial.ts                     <- \ud0c0\uc784 \ub77c\uc778 \uc77d\uae30 \/ Read Timeline\n\u251c\u2500 app\/api\/gts\/statuses\/[id]\/route.ts.   <- \uae00 \uc0ad\uc81c \/ Delete Post\n\u2514\u2500 app\/feed\/page.tsx                     <- UI<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 Nextjs \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131
Create a Next.js project<\/p>\n\n\n\n
npx create-next-app@latest<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 next-auth \uc124\uce58
Install next-auth<\/p>\n\n\n\n
npm install next-auth@beta<\/code><\/pre>\n\n\n\n
.\ud83d\udcc1 env.local \ud30c\uc77c \uc0dd\uc131
Create an .env.local file.<\/p>\n\n\n\n
# .env.local\n\n# GTS_BASE_URL=https:\/\/freelifemakers.com\nNEXT_PUBLIC_GTS_BASE_URL=https:\/\/freelifemakers.com\nGTS_URL=\"https:\/\/freelifemakers.com\"\n\n# GTS ID,Secret\nAUTH_GOTOSOCIAL_ID=\"\"\nAUTH_GOTOSOCIAL_SECRET=\"\"\n\n# npx auth secret  or openssl rand -base64 32 \ub85c \uc0dd\uc131\nAUTH_SECRET=\nAUTH_URL=\"http:\/\/localhost:3000\"<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \uc571 \ub4f1\ub85d\ud574\uc11c ID\/Secret \ubc1b\uae30(\ud130\ubbf8\ub110\uc5d0\uc11c \uc2e4\ud589)
Register the app to obtain the ID\/Secret (run in the terminal)<\/p>\n\n\n\n
\u2714\ufe0f client_id<\/code>,\u00a0client_secret<\/code>\ub97c  .env.local<\/code>\uc758 AUTH_GOTOSOIAL_ID\uc640 AUTH_GOTOSOCIAL_SECRET\uc5d0 \uc785\ub825\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
curl -X POST https:\/\/freelifemakers.com\/api\/v1\/apps \\\n  -H \"Content-Type: application\/json\" \\\n  -d '{\n    \"client_name\": \"freelife-local-dev\",\n    \"redirect_uris\": \"http:\/\/localhost:3000\/api\/auth\/callback\/gotosocial\",\n    \"scopes\": \"read write follow push\",\n    \"website\": \"http:\/\/localhost:3000\"\n  }'<\/code><\/pre>\n\n\n\n
1)http:\/\/localhost:3000\uc5d0\uc11c \uc2e4\ud589\ud558\uae30 \ub54c\ubb38\uc5d0 AUTH_URL=”http:\/\/localhost:3000″\uc774 \ub429\ub2c8\ub2e4.
Since it runs on http:\/\/localhost:3000, AUTH_URL becomes “http:\/\/localhost:3000”.<\/p>\n\n\n\n
2)AUTH_SECRET\uc740 npmx auth secret\ub85c \ud130\ubbf8\ub110\uc5d0\uc11c \uc0dd\uc131 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can generate AUTH_SECRET in the terminal using npmx auth secret<\/code>.<\/p>\n\n\n\n
\ud83d\udcc1 \ub85c\uadf8\uc778 , \ucf5c\ubc31 API (\ud575\uc2ec)
Login , Callback API (Core)<\/p>\n\n\n\n
—  app\/api\/auth\/[...nextauth]\/route.ts<\/code> <\/code><\/p>\n\n\n\n
\/\/ app\/api\/auth\/[...nextauth]\/route.ts\nimport { handlers } from \"@\/auth\"\nexport const { GET, POST } = handlers<\/code><\/pre>\n\n\n\n
— myapp9\/auth.ts<\/p>\n\n\n\n
\/\/ auth.ts (\ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\uc5d0 \uc0dd\uc131)\n\/\/ auth.ts (Created in the project root)\nimport NextAuth from \"next-auth\"\n\nexport const { handlers, auth, signIn, signOut } = NextAuth({\n  providers: [\n    {\n      id: \"gotosocial\",\n      name: \"freelifemakers\",\n      type: \"oauth\",\n      authorization: {\n        url: \"https:\/\/freelifemakers.com\/oauth\/authorize\",\n        params: { scope: \"read write follow push\" }\n      },\n      token: \"https:\/\/freelifemakers.com\/oauth\/token\",\n      userinfo: \"https:\/\/freelifemakers.com\/api\/v1\/accounts\/verify_credentials\",\n\n      \/\/ .env.local\uacfc \ubcc0\uc218\uba85 \uc77c\uce58\uc2dc\ud0a4\uae30\n      \/\/ Match with variable names in .env.local\n      clientId: process.env.AUTH_GOTOSOCIAL_ID,\n      clientSecret: process.env.AUTH_GOTOSOCIAL_SECRET,\n\n      \/\/ GTS \ud1a0\ud070 \ubc1c\uae09 \uc5d0\ub7ec(400 Bad Request) \ud574\uacb0 \uc808\ub300 \uc870\uac74\n      \/\/ Essential condition to resolve GTS token issuance error (400 Bad Request)\n      client: {\n        token_endpoint_auth_method: \"client_secret_post\",\n      },\n      profile(profile: any) {\n        return {\n          id: profile.id,\n          name: profile.display_name || profile.username,\n          image: profile.avatar,\n          email: profile.acct.includes('@') ? profile.acct : `${profile.acct}@freelifemakers.com`,\n        }\n      },\n    }\n  ],\n  callbacks: {\n    async jwt({ token, account }: any) {\n      if (account) token.accessToken = account.access_token\n      return token\n    },\n    async session({ session, token }: any) {\n      session.accessToken = token.accessToken\n      return session\n    }\n  }\n})\n<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 GoToSocial \ud074\ub77c\uc774\uc5b8\ud2b8 \ud30c\uc77c
GoToSocial client files<\/p>\n\n\n\n
\u2714\ufe0f lib\/gotosocial.ts<\/code>\u00a0\ub9cc\ub4e4\uae30 \/ Create lib\/gotosocial.ts<\/p>\n\n\n\n
— project\/lib\/gotosocial.ts<\/p>\n\n\n\n
export const GTS_BASE = process.env.GTS_URL!\n\n\/\/ \uc138\uc158\uc5d0\uc11c \uaebc\ub0b8 accessToken\uc73c\ub85c \ud0c0\uc784\ub77c\uc778 \uac00\uc838\uc624\uae30\n\/\/ etrieve the timeline using the accessToken obtained from the session\nexport async function getHomeTimeline(accessToken: string) {\n  const res = await fetch(`${GTS_BASE}\/api\/v1\/timelines\/home`, {\n    headers: { Authorization: `Bearer ${accessToken}` }\n  })\n  return res.json()\n}<\/code><\/pre>\n\n\n\n
1) myapp9\/app\/fee\/page.tsx\uc5d0\uc11c \ud638\ucd9c\ud569\ub2c8\ub2e4.
It is called from myapp9\/app\/fee\/page.tsx.<\/p>\n\n\n\n
\ud83d\udcc1 \ud504\ub860\ud2b8\uc5d4\ub4dc \/ Frontend<\/p>\n\n\n\n
— \uc11c\ubc84\uc758 \uae30\ub2a5\uacfc \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \uae30\ub2a5\uc740 \uac19\uc740 \ud398\uc774\uc9c0\uc5d0 \ucf54\ub4dc\ub97c \uc791\uc131 \ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.
You cannot write server-side and client-side code on the same page.<\/p>\n\n\n\n
— \uadf8\ub798\uc11c \ucf54\ub4dc\ub97c page.tsx\uc640 PostCard.tsx\ub85c \ubd84\ub9ac\ud569\ub2c8\ub2e4.
So, I am splitting the code into page.tsx<\/code> and PostCard.tsx<\/code>.<\/p>\n\n\n\n
\u2714\ufe0f myapp9\/app\/feed\/page.tsx<\/p>\n\n\n\n
\/\/ app\/feed\/page.tsx\nimport { auth } from \"@\/auth\"\nimport { getHomeTimeline } from \"@\/lib\/gotosocial\" \/\/ \/lib\/gotosocial.ts\nimport { PostCard } from '.\/PostCard' \/\/ Post,Delete Card Component\n\n\nexport default async function Feed() {\n  \/\/ NextAuth v5 \uc804\uc6a9 \uc138\uc158 \ucd94\ucd9c\n  \/\/ Extract session for NextAuth v5\n  const session = await auth() \n\n  \/\/ \ud1a0\ud070\uc774 \uc138\uc158\uc5d0 \uc548\uc804\ud558\uac8c \ub4e4\uc5b4\uc654\ub294\uc9c0 \uac80\uc99d\n  \/\/ Verify if the token has been safely retrieved in the session\n  if (!session?.accessToken) {\n    return (\n      <div className=\"p-10 text-center\">\n        <p className=\"text-red-500 font-semibold mb-2\">\uc778\uc99d \ud1a0\ud070\uc744 \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. \/ Unable to find authentication token.<\/p>\n        <a href=\"\/api\/auth\/signin\" className=\"text-blue-500 underline\">\ub85c\uadf8\uc778 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9 \/ Go to login page<\/a>\n      <\/div>\n    )\n  }\n\n\n  try {\n\n    \/\/ \/lib\/gotosocial.ts\uc758 getHomeTimeline() \ud568\uc218 \uc0ac\uc6a9\n    \/\/ Use the getHomeTimeline() function from \/lib\/gotosocial.ts\n    const posts = await getHomeTimeline(session.accessToken)\n\n    return (\n      <div className=\"max-w-xl mx-auto p-4 space-y-4\">\n        <h1 className=\"text-xl font-bold border-b pb-2\">\uc5f0\ud569 \uc6b0\uc8fc \ud0c0\uc784\ub77c\uc778<\/h1>\n        <h1 className=\"text-sm text-gray-500\"> Federated Universe Timeline <\/h1>\n        {posts.length === 0 ? (\n          <p className=\"text-gray-500 py-10 text-center\">\uc544\uc9c1 \ud0c0\uc784\ub77c\uc778\uc5d0 \ud45c\uc2dc\ud560 \uae00\uc774 \uc5c6\uc2b5\ub2c8\ub2e4. \/ No posts to display yet.<\/p>\n        ) : (\n          posts.map((p: any) => <PostCard key={p.id} post={p} token={session.accessToken} \/>)\n        )}\n      <\/div>\n    )\n  } catch (error) {\n    console.error(\"\ud53c\ub4dc \ub85c\ub529 \uc911 \uce58\uba85\uc801 \uc5d0\ub7ec \/ Fatal error while loading feed:\", error);\n    return <div className=\"p-10 text-red-500\">GTS \ubc31\uc5d4\ub4dc \uc11c\ubc84\uc640 \ud1b5\uc2e0\ud558\ub294 \uc911 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4. \/ Error occurred while communicating with GTS backend.<\/div>\n  }\n}\n\n\/\/ signout  : http:\/\/localhost:3000\/api\/auth\/signout\n\/\/ signin  : http:\/\/localhost:3000\/api\/auth\/signin<\/code><\/pre>\n\n\n\n
\u2714\ufe0f myapp9\/app\/feed\/PostCard.tsx<\/p>\n\n\n\n
\/\/ app\/feed\/PostCard.tsx\n'use client'\nimport { deleteStatus } from '@\/lib\/gotosocial'\n\nexport function PostCard({ post, token }: { post: any, token: string }) {\n  return (\n    <div className=\"border rounded-xl p-4 bg-white shadow-sm space-y-2\">\n      <div className=\"flex items-center space-x-2\">\n        <img src={post.account.avatar} className=\"w-8 h-8 rounded-full\" \/>\n        <span className=\"font-bold text-sm\">@{post.account.acct}<\/span>\n      <\/div>\n      <div dangerouslySetInnerHTML={{ __html: post.content }} \/>\n      \n      <button \n        onClick={async () => {\n          if(!confirm('\uc0ad\uc81c?')) return\n          await fetch(`\/api\/gts\/statuses\/${post.id}`, { method: 'DELETE' })\n          location.reload()\n        }}\n        className=\"text-red-500 text-sm\"\n      >\n        \uc0ad\uc81c\/Delete\n      <\/button>\n    <\/div>\n  )\n}<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \uae00 \uc0ad\uc81c \/ Delete Post<\/p>\n\n\n\n
— myapp9\/api\/gts\/statuses\/[id]\/route.ts<\/p>\n\n\n\n
\/\/ app\/api\/gts\/statuses\/[id]\/route.ts\nimport { auth } from \"@\/auth\"\n\n\/\/ \uc0ad\uc81c \/ Delete\nexport async function DELETE(req: Request, { params }: { params: Promise<{ id: string }> }) {\n  const { id } = await params\n  const session = await auth()\n  if (!session?.accessToken) return new Response(\"Unauthorized\", { status: 401 })\n\n  const baseUrl = process.env.GTS_URL || \"https:\/\/freelifemakers.com\"\n  const res = await fetch(`${baseUrl}\/api\/v1\/statuses\/${id}`, {\n    method: 'DELETE',\n    headers: { Authorization: `Bearer ${session.accessToken}` }\n  })\n\n  return new Response(null, { status: res.status })\n}<\/code><\/pre>\n\n\n\n
1)\uae00 \uc0ad\uc81c \ubd80\ubd84 \ub77c\uc6b0\ud130\ub97c \ub530\ub85c \ub9cc\ub4e0 \uc774\uc720\ub294 \uc11c\ubc84\uc758 CORS\uc5d0\ub7ec \ub54c\ubb38\uc785\ub2c8\ub2e4.
I created a separate router for the post deletion functionality due to a server-side CORS error.<\/p>\n\n\n\n
2)gotosocial.ts\uc5d0 \uae00\uc0ad\uc81c \ud568\uc218\uac00 \uc788\ub294 \uacbd\uc6b0 PostCard.tsx\uc5d0\uc11c \ud638\ucd9c\ud558\uba74 PostCard.tsx\uac00 \ube0c\ub77c\uc6b0\uc800\uac00 \ub418\uae30 \ub584\ubb38\uc5d0 \uc11c\ubc84\uc5d0\uc11c \ucc28\ub2e8\ud569\ub2c8\ub2e4.
If the post deletion function is located in gotosocial.ts<\/code> and called from PostCard.tsx<\/code>, the server will block the request because PostCard.tsx<\/code> acts as the client (browser).<\/p>\n\n\n\n
3)\uc11c\ubc84\uc640 \uc11c\ubc84\ub07c\ub9ac\ub294 CORS\ubb38\uc81c\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.
There are no CORS issues between servers.<\/p>\n\n\n\n
4) \uadf8\ub798\uc11c PostCard.tsx\uac00 \uc2e4\ud589\ud55c \ub77c\uc6b0\ud2b8\uc5d0\uc11c gotosocial\uc11c\ubc84\uc5d0 \uc0ad\uc81c\uc694\uccad\uc744 \ud569\ub2c8\ub2e4.
Therefore, the route executed by PostCard.tsx<\/code> sends a deletion request to the GoToSocial server.<\/p>\n\n\n\n
\ud83d\udcc1 \uc2e4\ud589 \/ Start Server<\/p>\n\n\n\n
npm run dev<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \ube0c\ub77c\uc6b0\uc800 \uc811\uc18d \/ Access Browser<\/p>\n\n\n\n
http://localhost:3000\/feed<\/code><\/pre>\n\n\n\n
\"\"
http:\/\/localhost:3000\/feed<\/figcaption><\/figure>\n\n\n\n
\"\"
Delete Post<\/figcaption><\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb gotosocial\uc740 \uae00\uc4f0\uae30 UI\ub97c \uc9c0\uc6d0\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.GoToSocial does not support a post-writing UI. \ud83d\udc49\ud83c\udffb \uadf8\ub798\uc11c \uae00\uc744 \uc791\uc131\ud558\uace0 \uc218\uc815\ud558\uace0 \uc0ad\uc81c\ud558\uae30\uc704\ud574\uc11c\ub294 \ubcc4\ub3c4\uc758 \uc571\uc774\ub098 \uc6f9\uc0ac\uc774\ud2b8\ub97c \uc774\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.Therefore, you need to use a separate app or website to create, edit, and delete posts. \ud83d\udc49\ud83c\udffb Tusky(\ubaa8\ubc14\uc77c)\ub098 Pinafore(\uc6f9\uc0ac\uc774\ud2b8)\ub4f1\uc744 \uc774\uc6a9\ud558\uba74 \uae00\uc744 \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.You can write posts using apps like Tusky(mobile) or Pinafore.(website) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27,1,7],"tags":[],"class_list":["post-7594","post","type-post","status-publish","format-standard","hentry","category-nextjs","category-uncategorized","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/7594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=7594"}],"version-history":[{"count":81,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/7594\/revisions"}],"predecessor-version":[{"id":7682,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/7594\/revisions\/7682"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=7594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=7594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=7594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}