myapp5\/ \n\u251c\u2500\u2500 .env.local <\/strong> # GitHub ID, Secret,AUTH_SECRET\n\u251c\u2500\u2500 auth.ts <\/strong> # Auth.ts for github \n\u251c\u2500\u2500 package.json \n\u251c\u2500\u2500 tsconfig.json \n\u2502\n\u2514\u2500\u2500 app\/ \n \u251c\u2500\u2500 layout.tsx \n \u251c\u2500\u2500 globals.css \n \u251c\u2500\u2500 page.tsx # Main Page(http:\/\/localhost:3000)\n \u2502\n \u251c\u2500\u2500 api\/ <\/strong> # Back-end\n \u2502 \u2514\u2500\u2500 auth\/ <\/strong> # auth\n \u2502 \u2514\u2500\u2500 [...nextauth]\/<\/strong> # Catch-all\n \u2502 \u2514\u2500\u2500 route.ts <\/strong> # GET, POST handlers\n \u2502\n \u2514\u2500\u2500 socialauth\/ <\/strong> \n \u2514\u2500\u2500 page.tsx <\/strong> # Login\n\n(http:\/\/localhost:3000\/socialauth)\n<\/code><\/pre>\n\n\n\n\ud83d\udcc1 \ud504\ub85c\uc81d\ud2b8\uc124\uce58 \/ Project Installation<\/p>\n\n\n\n
npx create-next-app@latest<\/code><\/pre>\n\n\n\n\ud83d\udcc1 NextAuth \ud328\ud0a4\uc9c0 \uc124\uce58
Install the NextAuth package<\/p>\n\n\n\n
npm install next-auth@beta<\/code><\/pre>\n\n\n\n\ud83d\udcc1 \uae43\ud5c8\ube0c\uc5d0 \uc571\ub4f1\ub85d
Register app on GitHub<\/p>\n\n\n\n
https:\/\/github.com\/settings\/developers<\/a><\/p>\n\n\n\n— \uae43\ud5c8\ube0c \ud398\uc774\uc9c0\uc5d0 \uc544\ub798\uc640 \uac19\uc774 \ub3d9\uc77c\ud558\uac8c \uc8fc\uc18c\ub97c \uc785\ub825\ud569\ub2c8\ub2e4.
Enter the address on the GitHub Pages site exactly as shown below.<\/p>\n\n\n\n
Homepage URL: http:\/\/localhost:3000\nAuthorization callback URL: http:\/\/localhost:3000\/api\/auth\/callback\/github<\/code><\/pre>\n\n\n\n1)ClientID\uc640 Client Secret\uc744 \uc800\uc7a5\ud574 \ub461\ub2c8\ub2e4.(1\ud68c\ub9cc \ub178\ucd9c)
Save the Client ID and Client Secret (they are displayed only once).<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/github_auth-2-jpg.jpg\")
github-myapp5<\/figcaption><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/github_auth-4-jpg.jpg\")
github-myapp5<\/figcaption><\/figure>\n\n\n\n\ud83d\udcc1 auth.ts\ud30c\uc77c \uc0dd\uc131
Create the auth.ts file.<\/p>\n\n\n\n
— project\/app\/auth.ts<\/p>\n\n\n\n
\/\/ auth.ts\nimport NextAuth from \"next-auth\"\nimport GitHub from \"next-auth\/providers\/github\"\n\nexport const { handlers, auth, signIn, signOut } = NextAuth({\n providers: [\n GitHub({\n clientId: process.env.AUTH_GITHUB_ID,\n clientSecret: process.env.AUTH_GITHUB_SECRET,\n }),\n ],\n})<\/code><\/pre>\n\n\n\n\ud83d\udcc1 \ud658\uacbd\ubcc0\uc218 \ud30c\uc77c \uc0dd\uc131(.env.local)
Create environment variable file (.env.local)<\/p>\n\n\n\n
# .env.local\nAUTH_SECRET=\"\ub79c\ub364 \ubb38\uc790\uc5f4 \ud0a4\/Random string key\"\nAUTH_GITHUB_ID=\"\uae43\ud5c8\ube0c\uc5d0\uc11c \ubc1c\uae09\ubc1b\uc740 Client ID\/Client ID issued by GitHub\"\nAUTH_GITHUB_SECRET=\"\uae43\ud5c8\ube0c\uc5d0\uc11c \ubc1c\uae09\ubc1b\uc740 Client Secret\/Client Secret issued by GitHub\"<\/code><\/pre>\n\n\n\n1)AUTH_SECRET<\/p>\n\n\n\n
\ud130\ubbf8\ub110\uc5d0 npx auth secret\uc744 \uc785\ub825\ud558\uba74 \ubb34\uc791\uc704 \ubb38\uc790\uc5f4\uc774 \uc790\ub3d9 \uc0dd\uc131\ub429\ub2c8\ub2e4.
Entering npx auth secret<\/code> in the terminal automatically generates a random string.<\/p>\n\n\n\n2)\uc0dd\uc131\ub41c \ubb38\uc790\uc5f4\uc744 AUTH_SECRET\uc5d0 \ubd99\uc5ec \ub123\uc2b5\ub2c8\ub2e4.
Paste the generated string into AUTH_SECRET.<\/p>\n\n\n\n
\ud83d\udcc1 API\ub77c\uc6b0\ud130 \ud578\ub4e4\ub7ec \uc791\uc131
Writing API Router Handlers<\/p>\n\n\n\n
— route.ts<\/p>\n\n\n\n
\/\/ app\/api\/auth\/[...nextauth]\/route.ts\n\/\/import { handlers } from \"@\/auth\" \nimport { handlers } from \"..\/..\/..\/auth\" \nexport const { GET, POST } = handlers<\/code><\/pre>\n\n\n\n1)route.ts \ud30c\uc77c\uc758 \uc704\uce58\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. app\/api\/auth\/[…nextauth]\/route.ts
The location of the route.ts file is as follows: app\/api\/auth\/[\u2026nextauth]\/route.ts<\/p>\n\n\n\n
2)\uae43\ud5c8\ube0c\uc778\uc99d\uc2dc \ucf5c\ubc31 url\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.
The callback URL for GitHub authentication is as follows:<\/p>\n\n\n\n
http:\/\/localhost:3000\/api\/auth\/callback\/github<\/a><\/code><\/pre>\n\n\n\n3) \ucf5c\ubc31 url\uc744 \ud1b5\ud574\uc11c \ubc1c\uae09\ubc1b\uc740 \ud0a4\ub97c \ud655\uc778\ud558\uac8c \ub429\ub2c8\ub2e4.
You will verify the issued key via the callback URL.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/socilalauto-login-1024x608.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/08\/socialauth-logout.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"