[{"data":1,"prerenderedAt":683},["ShallowReactive",2],{"blog-post-/blog/supabase-google-auth/":3},{"id":4,"title":5,"body":6,"description":659,"extension":660,"meta":661,"navigation":464,"path":678,"seo":679,"sitemap":680,"stem":681,"__hash__":682},"content/blog/supabase-google-auth.md","Integrating Google Auth with Supabase in Nuxt.js",{"type":7,"value":8,"toc":651},"minimark",[9,14,18,23,38,45,51,57,63,69,73,79,85,91,97,103,109,113,118,144,147,168,178,242,251,273,279,283,293,299,305,310,315,321,325,331,335,346,352,358,364,375,381,387,391,394,640,644,647],[10,11,13],"h1",{"id":12},"integrating-google-authentication-with-supabase-in-nuxtjs","Integrating Google Authentication with Supabase in Nuxt.js",[15,16,17],"p",{},"This guide walks through adding Google OAuth to your Nuxt.js app using Supabase step by step.",[19,20,22],"h2",{"id":21},"_1-set-up-supabase","1. Set Up Supabase",[15,24,25,29,30,37],{},[26,27,28],"strong",{},"Create an Account:"," If you don't already have a Supabase account, sign up at ",[31,32,36],"a",{"href":33,"rel":34},"https://supabase.com",[35],"nofollow","supabase.com",".",[15,39,40],{},[41,42],"img",{"alt":43,"src":44},"Supabase sign up","/img/supabase-google/1.jpg",[15,46,47,50],{},[26,48,49],{},"Create an Organization and Project:"," After logging in, create your organization and a new project.",[15,52,53],{},[41,54],{"alt":55,"src":56},"Create organization","/img/supabase-google/2.jpg",[15,58,59,62],{},[26,60,61],{},"Define Project Details:"," Enter a project name and create a password. Save this password securely. Click \"Create New Project.\"",[15,64,65],{},[41,66],{"alt":67,"src":68},"Create new project","/img/supabase-google/3.jpg",[19,70,72],{"id":71},"_2-obtain-supabase-credentials","2. Obtain Supabase Credentials",[15,74,75,78],{},[26,76,77],{},"Copy Public Key and URL:"," Once the project is created, copy the public key and URL displayed.",[15,80,81],{},[41,82],{"alt":83,"src":84},"Copy public key","/img/supabase-google/4.jpg",[15,86,87,90],{},[26,88,89],{},"Access Project Settings:"," Go to the left sidebar and click on \"Project Settings.\"",[15,92,93],{},[41,94],{"alt":95,"src":96},"Project settings","/img/supabase-google/5.jpg",[15,98,99,102],{},[26,100,101],{},"Retrieve Connection String:"," Navigate to \"Database\" to get the connection string and copy it.",[15,104,105],{},[41,106],{"alt":107,"src":108},"Connection string","/img/supabase-google/6.jpg",[19,110,112],{"id":111},"_3-set-up-supabase-in-your-nuxtjs-project","3. Set Up Supabase in Your Nuxt.js Project",[15,114,115],{},[26,116,117],{},"Install Supabase Module:",[119,120,125],"pre",{"className":121,"code":122,"language":123,"meta":124,"style":124},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @nuxtjs/supabase\n","bash","",[126,127,128],"code",{"__ignoreMap":124},[129,130,133,137,141],"span",{"class":131,"line":132},"line",1,[129,134,136],{"class":135},"sBMFI","npm",[129,138,140],{"class":139},"sfazB"," install",[129,142,143],{"class":139}," @nuxtjs/supabase\n",[15,145,146],{},"or",[119,148,150],{"className":121,"code":149,"language":123,"meta":124,"style":124},"npx nuxi@latest module add @nuxtjs/supabase\n",[126,151,152],{"__ignoreMap":124},[129,153,154,157,160,163,166],{"class":131,"line":132},[129,155,156],{"class":135},"npx",[129,158,159],{"class":139}," nuxi@latest",[129,161,162],{"class":139}," module",[129,164,165],{"class":139}," add",[129,167,143],{"class":139},[15,169,170,173,174,177],{},[26,171,172],{},"Configure Nuxt.js:"," Open ",[126,175,176],{},"nuxt.config.ts"," and add the module:",[119,179,183],{"className":180,"code":181,"language":182,"meta":124,"style":124},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxtjs/supabase'],\n})\n","ts",[126,184,185,206,233],{"__ignoreMap":124},[129,186,187,191,194,198,202],{"class":131,"line":132},[129,188,190],{"class":189},"s7zQu","export",[129,192,193],{"class":189}," default",[129,195,197],{"class":196},"s2Zo4"," defineNuxtConfig",[129,199,201],{"class":200},"sTEyZ","(",[129,203,205],{"class":204},"sMK4o","{\n",[129,207,209,213,216,219,222,225,227,230],{"class":131,"line":208},2,[129,210,212],{"class":211},"swJcz","  modules",[129,214,215],{"class":204},":",[129,217,218],{"class":200}," [",[129,220,221],{"class":204},"'",[129,223,224],{"class":139},"@nuxtjs/supabase",[129,226,221],{"class":204},[129,228,229],{"class":200},"]",[129,231,232],{"class":204},",\n",[129,234,236,239],{"class":131,"line":235},3,[129,237,238],{"class":204},"}",[129,240,241],{"class":200},")\n",[15,243,244,247,248,215],{},[26,245,246],{},"Create Environment File:"," Add your credentials to ",[126,249,250],{},".env",[119,252,256],{"className":253,"code":254,"language":255,"meta":124,"style":124},"language-env shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","SUPABASE_URL=your_supabase_url\nSUPABASE_KEY=your_supabase_key\nDATABASE_URL=your_database_url\n","env",[126,257,258,263,268],{"__ignoreMap":124},[129,259,260],{"class":131,"line":132},[129,261,262],{},"SUPABASE_URL=your_supabase_url\n",[129,264,265],{"class":131,"line":208},[129,266,267],{},"SUPABASE_KEY=your_supabase_key\n",[129,269,270],{"class":131,"line":235},[129,271,272],{},"DATABASE_URL=your_database_url\n",[15,274,275],{},[41,276],{"alt":277,"src":278},"Supabase module setup","/img/supabase-google/7.jpg",[19,280,282],{"id":281},"_4-configure-google-authentication","4. Configure Google Authentication",[15,284,285,288,289,292],{},[26,286,287],{},"Enable Google Provider:"," In Supabase, go to ",[26,290,291],{},"Authentication → Providers → Google"," and enable it.",[15,294,295],{},[41,296],{"alt":297,"src":298},"Enable Google provider","/img/supabase-google/8.jpg",[15,300,301],{},[41,302],{"alt":303,"src":304},"Google provider settings","/img/supabase-google/9.jpg",[15,306,307],{},[26,308,309],{},"Set Up Google Cloud Console:",[311,312,314],"h4",{"id":313},"_1-create-a-new-project-in-the-google-cloud-console","1. Create a new project in the Google Cloud Console.",[15,316,317],{},[41,318],{"alt":319,"src":320},"Google Cloud Console - new project","/img/supabase-google/10.jpg",[311,322,324],{"id":323},"_2-navigate-to-apis-services-credentials","2. Navigate to \"APIs & Services\" → \"Credentials.\"",[15,326,327],{},[41,328],{"alt":329,"src":330},"APIs and Services","/img/supabase-google/11.jpg",[311,332,334],{"id":333},"_3-create-an-oauth-client-id","3. Create an OAuth Client ID",[15,336,337,338,341,342,345],{},"Choose ",[26,339,340],{},"Web Application",", add your origin (e.g., ",[126,343,344],{},"http://localhost:3000",") and the redirect URI from Supabase. Save the configuration.",[15,347,348],{},[41,349],{"alt":350,"src":351},"OAuth Client ID setup","/img/supabase-google/12.jpg",[15,353,354],{},[41,355],{"alt":356,"src":357},"Redirect URI configuration","/img/supabase-google/13.jpg",[15,359,360],{},[41,361],{"alt":362,"src":363},"Save OAuth credentials","/img/supabase-google/14.jpg",[15,365,366,367,370,371,374],{},"Copy the ",[26,368,369],{},"Client ID"," and ",[26,372,373],{},"Client Secret"," back into Supabase's Google provider settings.",[15,376,377],{},[41,378],{"alt":379,"src":380},"Copy client credentials","/img/supabase-google/15.jpg",[15,382,383],{},[41,384],{"alt":385,"src":386},"Final Google provider config","/img/supabase-google/16.jpg",[19,388,390],{"id":389},"_5-implement-authentication-in-nuxtjs","5. Implement Authentication in Nuxt.js",[15,392,393],{},"In the script setup section of your component, add the following code:",[119,395,399],{"className":396,"code":397,"language":398,"meta":124,"style":124},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst client = useSupabaseClient()\nconst user = useSupabaseUser()\n\nconst login = async () => {\n  const { data, error } = await client.auth.signInWithOAuth({\n    provider: 'google',\n    options: {\n      queryParams: {\n        access_type: 'offline',\n        prompt: 'consent',\n      },\n    },\n  })\n}\n\u003C/script>\n","vue",[126,400,401,429,445,459,466,488,532,550,560,570,587,604,610,616,624,630],{"__ignoreMap":124},[129,402,403,406,409,413,416,419,422,424,426],{"class":131,"line":132},[129,404,405],{"class":204},"\u003C",[129,407,408],{"class":211},"script",[129,410,412],{"class":411},"spNyl"," setup",[129,414,415],{"class":411}," lang",[129,417,418],{"class":204},"=",[129,420,421],{"class":204},"\"",[129,423,182],{"class":139},[129,425,421],{"class":204},[129,427,428],{"class":204},">\n",[129,430,431,434,437,439,442],{"class":131,"line":208},[129,432,433],{"class":411},"const",[129,435,436],{"class":200}," client ",[129,438,418],{"class":204},[129,440,441],{"class":196}," useSupabaseClient",[129,443,444],{"class":200},"()\n",[129,446,447,449,452,454,457],{"class":131,"line":235},[129,448,433],{"class":411},[129,450,451],{"class":200}," user ",[129,453,418],{"class":204},[129,455,456],{"class":196}," useSupabaseUser",[129,458,444],{"class":200},[129,460,462],{"class":131,"line":461},4,[129,463,465],{"emptyLinePlaceholder":464},true,"\n",[129,467,469,471,474,476,479,482,485],{"class":131,"line":468},5,[129,470,433],{"class":411},[129,472,473],{"class":200}," login ",[129,475,418],{"class":204},[129,477,478],{"class":411}," async",[129,480,481],{"class":204}," ()",[129,483,484],{"class":411}," =>",[129,486,487],{"class":204}," {\n",[129,489,491,494,497,500,503,506,509,512,515,518,520,523,525,528,530],{"class":131,"line":490},6,[129,492,493],{"class":411},"  const",[129,495,496],{"class":204}," {",[129,498,499],{"class":200}," data",[129,501,502],{"class":204},",",[129,504,505],{"class":200}," error",[129,507,508],{"class":204}," }",[129,510,511],{"class":204}," =",[129,513,514],{"class":189}," await",[129,516,517],{"class":200}," client",[129,519,37],{"class":204},[129,521,522],{"class":200},"auth",[129,524,37],{"class":204},[129,526,527],{"class":196},"signInWithOAuth",[129,529,201],{"class":211},[129,531,205],{"class":204},[129,533,535,538,540,543,546,548],{"class":131,"line":534},7,[129,536,537],{"class":211},"    provider",[129,539,215],{"class":204},[129,541,542],{"class":204}," '",[129,544,545],{"class":139},"google",[129,547,221],{"class":204},[129,549,232],{"class":204},[129,551,553,556,558],{"class":131,"line":552},8,[129,554,555],{"class":211},"    options",[129,557,215],{"class":204},[129,559,487],{"class":204},[129,561,563,566,568],{"class":131,"line":562},9,[129,564,565],{"class":211},"      queryParams",[129,567,215],{"class":204},[129,569,487],{"class":204},[129,571,573,576,578,580,583,585],{"class":131,"line":572},10,[129,574,575],{"class":211},"        access_type",[129,577,215],{"class":204},[129,579,542],{"class":204},[129,581,582],{"class":139},"offline",[129,584,221],{"class":204},[129,586,232],{"class":204},[129,588,590,593,595,597,600,602],{"class":131,"line":589},11,[129,591,592],{"class":211},"        prompt",[129,594,215],{"class":204},[129,596,542],{"class":204},[129,598,599],{"class":139},"consent",[129,601,221],{"class":204},[129,603,232],{"class":204},[129,605,607],{"class":131,"line":606},12,[129,608,609],{"class":204},"      },\n",[129,611,613],{"class":131,"line":612},13,[129,614,615],{"class":204},"    },\n",[129,617,619,622],{"class":131,"line":618},14,[129,620,621],{"class":204},"  }",[129,623,241],{"class":211},[129,625,627],{"class":131,"line":626},15,[129,628,629],{"class":204},"}\n",[129,631,633,636,638],{"class":131,"line":632},16,[129,634,635],{"class":204},"\u003C/",[129,637,408],{"class":211},[129,639,428],{"class":204},[19,641,643],{"id":642},"conclusion","Conclusion",[15,645,646],{},"By following these steps, you'll successfully integrate Google Authentication with Supabase in your Nuxt.js project. This setup provides a secure and efficient way for users to authenticate. Happy coding!",[648,649,650],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":124,"searchDepth":208,"depth":208,"links":652},[653,654,655,656,657,658],{"id":21,"depth":208,"text":22},{"id":71,"depth":208,"text":72},{"id":111,"depth":208,"text":112},{"id":281,"depth":208,"text":282},{"id":389,"depth":208,"text":390},{"id":642,"depth":208,"text":643},"How to add Google Authentication to a Nuxt.js app using Supabase. Covers Supabase OAuth setup, Google Cloud Console configuration, and signInWithOAuth implementation.","md",{"author":662,"date":663,"image":664,"category":665,"tags":666,"featured":677,"draft":677},"Aysegul Karadan","2024-07-11T10:00:00.000Z","/img/supabase-google/cover.png","Web Development",[667,668,669,670,671,672,673,674,675,676],"supabase","google-auth","nuxt","authentication","oauth","supabase-google-auth-nuxt","how-to-add-google-auth-supabase","nuxt-google-oauth","supabase-oauth-setup","google-signin-nuxt",false,"/blog/supabase-google-auth",{"title":5,"description":659},{"loc":678},"blog/supabase-google-auth","od84D761jdlc500jYrn8dx2UWUssQ-hA_GgTCmISpEY",1782986782640]