wasp-lang/wasp
1
1
Fork 0
mirror of https://github.com/wasp-lang/wasp.git synced 2024-12-26 10:35:04 +03:00
Code Issues Projects Releases Wiki Activity

Fixes oAuth redirect behaviour in development (#1275)

Browse Source
This commit is contained in:
Mihovil Ilakovac 2023-06-22 10:47:47 +02:00 committed by GitHub
parent 67f88cc50e
commit e3873a6148
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
waspc/data/Generator/templates/react-app/src/auth/pages/OAuthCodeExchange.jsx
View File

@ -1,5 +1,5 @@
{{={= =}=}}
import React, { useEffect } from 'react'
import React, { useEffect, useRef } from 'react'
import { useHistory } from 'react-router-dom'
import config from '../../config.js'
@ -14,12 +14,25 @@ import { initSession } from '../helpers/user'
export default function OAuthCodeExchange({ pathToApiServerRouteHandlingOauthRedirect }) {
const history = useHistory()
// We are using a ref to prevent sending the OAuth token twice in development.
// Since React 18 and using their StrictMode, useEffect is called twice in development.
// Fixing it this way is not recommended by the docs, but they don't offer any alternatives
// for this particular use case (oauth redirect page):
// https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development
const firstRender = useRef(true)
useEffect(() => {
if (!firstRender.current) {
return
}
// NOTE: Different auth methods will have different Wasp API server validation paths.
// This helps us reuse one component for various methods (e.g., Google, Facebook, etc.).
const apiServerUrlHandlingOauthRedirect = constructOauthRedirectApiServerUrl(pathToApiServerRouteHandlingOauthRedirect)
exchangeCodeForJwtAndRedirect(history, apiServerUrlHandlingOauthRedirect)
return () => {
firstRender.current = false
}
}, [history, pathToApiServerRouteHandlingOauthRedirect])
return (

2
waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums generated
View File

@ -739,7 +739,7 @@
"file",
"web-app/src/auth/pages/OAuthCodeExchange.jsx"
],
"180e07f82c8290f9cae71e0aef97b40cf1b72a5a5fb58317feaf4cf66e629e42"
"7dbcc288201aafbb50b5f5319a28283546c81d006fe61c2a8a3c5f55c6833fb2"
],
[
[

15
waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/auth/pages/OAuthCodeExchange.jsx generated
View File

@ -1,4 +1,4 @@
import React, { useEffect } from 'react'
import React, { useEffect, useRef } from 'react'
import { useHistory } from 'react-router-dom'
import config from '../../config.js'
@ -13,12 +13,25 @@ import { initSession } from '../helpers/user'
export default function OAuthCodeExchange({ pathToApiServerRouteHandlingOauthRedirect }) {
const history = useHistory()
// We are using a ref to prevent sending the OAuth token twice in development.
// Since React 18 and using their StrictMode, useEffect is called twice in development.
// Fixing it this way is not recommended by the docs, but they don't offer any alternatives
// for this particular use case (oauth redirect page):
// https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development
const firstRender = useRef(true)
useEffect(() => {
if (!firstRender.current) {
return
}
// NOTE: Different auth methods will have different Wasp API server validation paths.
// This helps us reuse one component for various methods (e.g., Google, Facebook, etc.).
const apiServerUrlHandlingOauthRedirect = constructOauthRedirectApiServerUrl(pathToApiServerRouteHandlingOauthRedirect)
exchangeCodeForJwtAndRedirect(history, apiServerUrlHandlingOauthRedirect)
return () => {
firstRender.current = false
}
}, [history, pathToApiServerRouteHandlingOauthRedirect])
return (