blitz
blitz copied to clipboard
cannot get `context.session.$publicData` with `passportAuth` and app router
What is the problem?
I'm trying to migrate from page
to app
.
Our application uses passport -google-oauth20
to authenticate users. But even though users have signed in, they can't be authenticated by useAuthenticatedBlitzContext
, and redirect to login page.
It seems that there is no session data in BlitzContext
.
Session has been created.(in Client Component, useSession
returns session data correctly)
How can I do about this?
Paste all your error logs here:
It seems that there is no error logs in both client and server.
Paste all relevant code snippets here:
app/blitz-client.ts
"use client"
import { AuthClientPlugin } from "@blitzjs/auth"
import { setupBlitzClient } from "@blitzjs/next"
import { BlitzRpcPlugin } from "@blitzjs/rpc"
export const authConfig = {
cookiePrefix: "my-cookie",
}
export const { withBlitz, BlitzProvider, useSession, useAuthenticatedSession } = setupBlitzClient({
plugins: [AuthClientPlugin(authConfig), BlitzRpcPlugin({})],
})
/app/blitz-server.ts
import { setupBlitzServer } from "@blitzjs/next"
import { AuthServerPlugin, PrismaStorage } from "@blitzjs/auth"
import { simpleRolesIsAuthorized } from "@blitzjs/auth"
import { BlitzLogger } from "blitz"
import db from "db"
import { authConfig } from "./blitz-client"
import { RpcServerPlugin } from "@blitzjs/rpc"
export const { gSSP, gSP, useAuthenticatedBlitzContext, getBlitzContext, api, invoke } =
setupBlitzServer({
plugins: [
AuthServerPlugin({
...authConfig,
storage: PrismaStorage(db),
isAuthorized: simpleRolesIsAuthorized,
}),
RpcServerPlugin({}),
],
logger: BlitzLogger({}),
})
/app/layout.tsx
"use client"
import React from "react"
import { BlitzProvider } from "app/blitz-client"
import "./globals.css"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja" className="dark scroll-smooth">
<head>
<title>Karabina</title>
</head>
<body className="dark:bg-black dark:text-gray-850">
<BlitzProvider>{children}</BlitzProvider>
</body>
</html>
)
}
/app/page.tsx
import Link from "next/link"
export default function Page() {
<Link href="/api/auth/google?scope=email" passHref legacyBehavior>Sign in with Google</Link>
}
/src/pages/api/auth/[...auth].ts
import { passportAuth } from "@blitzjs/auth"
import { api } from "app/blitz-server"
import db from "db"
import { Strategy as GoogleStrategy } from "passport-google-oauth20"
import * as process from "process"
export default api(
passportAuth({
successRedirectUrl: "/",
errorRedirectUrl: "/",
secureProxy: true,
strategies: [
{
strategy: new GoogleStrategy(
{
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
callbackURL: process.env.GOOGLE_CALLBACK,
scope: ["email"],
},
async function (accessToken, refreshToken, profile, done) {
const email = profile.emails && profile.emails[0]?.value
if (!email) {
return done(new Error("Google response doesn't have email."))
}
const userIdp = await db.userIdp.upsert({
where: {
provider_providerId: { provider: profile.provider, providerId: profile.id },
},
create: {
provider: profile.provider,
providerId: profile.id,
},
update: { providerId: profile.id },
})
const user = await db.user.upsert({
where: { userIdpId: userIdp.id },
create: {
email,
name: email,
userIdpId: userIdp.id,
},
update: { email },
})
const publicData = {
userId: user.id,
roles: [user.role],
source: userIdp.provider,
}
done(undefined, { publicData })
}
),
},
],
})
)
/app/secure/page.tsx
import { getBlitzContext, useAuthenticatedBlitzContext } from "app/blitz-server"
export default async function Page() {
const ctx = await getBlitzContext()
console.log(ctx.session.$publicData) // => { userId: null }
await useAuthenticatedBlitzContext({
redirectTo: "/auth/login",
role: ["USER"],
redirectAuthenticatedTo: "/",
})
return <div>Secured Content</div>
}
What are detailed steps to reproduce this?
- click the
Sign in with Google
in/
with no authentication - authenticate and permit to access in Google website
- redirect back to
/
from Google website - go to
/secure
- redirect to
/auth/login
byuseAuthenticatedBlitzContext
<= this is the problem.
Run blitz -v
and paste the output here:
> blitz -v
Blitz version: 2.0.0-beta.20 (global)
Blitz version: 2.0.0-beta.32 (local)
macOS Monterey | darwin-arm64 | Node: v16.16.0
Package manager: npm
System:
OS: macOS 12.5.1
CPU: (8) arm64 Apple M1
Memory: 84.44 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.anyenv/envs/nodenv/versions/16.16.0/bin/node
Yarn: 3.6.2 - ~/.volta/bin/yarn
npm: 8.15.1 - ~/.anyenv/envs/nodenv/versions/16.16.0/bin/npm
npmPackages:
@blitzjs/auth: 2.0.0-beta.32 => 2.0.0-beta.32
@blitzjs/next: 2.0.0-beta.32 => 2.0.0-beta.32
@blitzjs/rpc: 2.0.0-beta.32 => 2.0.0-beta.32
@prisma/client: ^5.2.0 => 5.2.0
blitz: 2.0.0-beta.32 => 2.0.0-beta.32
next: 13.4.19 => 13.4.19
prisma: ^5.2.0 => 5.2.0
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: ^4.8.4 => 4.9.5
Please include below any other applicable logs and screenshots that show your problem:
No response