Social signup for Expo App
Hello, i setup social signup on my backend and on my expo app now.
This is my frontend code:
let res = await authClient.signIn.social({
provider: "google",
callbackURL: "/profile"
})
however, when i call this function, a google page opens, i click on my account and then I do not get logged in and res simply is:
{"data": {"redirect": true, "url": "https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=434798643109-4rdfk5bfl9qvj1se6v9ob59ejv55lj2c.apps.googleusercontent.com&state=Exw4iqfYOolNIcj4uEjLHMu-uVhcecHe&scope=email+profile+openid&redirect_uri=http%3A%2F%2Fdressr.at%3A4000%2Fapi%2Fauth%2Fcallback%2Fgoogle&code_challenge_method=S256&code_challenge=x4haVELGgCwBmuu6Cn3F8ftM30RIoXh1sUIvT5OVEPI"}, "error": null}
Could someone help?
6 Replies
Are you using the token id method or redirect URI ?
im using redirect uri method
Okay so there is a bit workaround for this because in local development Google thorws error like private ip not allowed etc.
You have to tunnel you local backend ip using Ngrok . You will have to use that given url in your auth.ts like },
socialProviders: {
google: {
clientId: process.env.AUTH_GOOGLE_ID,
clientSecret: process.env.AUTH_GOOGLE_SECRET,
redirectURI: "https://a652-103-182-161-102.ngrok-free.app/api/auth/callback/google",
},
},
emailAndPassword: {
enabled: true,
},
plugins: [
expo(),
jwt(),
bearer(),
oAuthProxy({ productionURL: "https://a652-103-182-161-102.ngrok-free.app" }),
openAPI(),
the redirect URI here in auth.ts should be same as in your Google credential authorized redirect URI
This method is for only if you dont have your backend/domain deployed and you are working locally
i already have my backend and domain deployed, only my frontend is running locally
send auth config
full
backend or frontend?
Frontend:
import { createAuthClient } from "better-auth/react";
import { expoClient } from "@better-auth/expo/client";
import * as SecureStore from "expo-secure-store";
import api from "../services/axios";
import { usernameClient } from "better-auth/client/plugins"
export const authClient = createAuthClient({
baseURL: "http://dressr.at:4000/", /* base url of your Better Auth backend. /
plugins: [
expoClient({
scheme: "dressr",
storagePrefix: "dressr",
storage: SecureStore,
}),
usernameClient()
]
});
Backend:
import { betterAuth } from "better-auth";
import pool from "../config/database.js";
import { expo } from "@better-auth/expo";
import { username } from "better-auth/plugins"
export const auth = betterAuth({
database: pool,
emailAndPassword: {
enabled: true
},
plugins: [
expo(),
username()
],
socialProviders: {
google: {
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET
}
},
trustedOrigins: [""]
})