Update configs

pages/apps.tsx

@@ -5,10 +5,13 @@ import Link from "next/link"
 import { useRouter } from "next/router"
 import { ReactNode, useEffect, useState } from "react"
 import QRCode from "react-qr-code"
+import getConfig from "next/config"
 
 import { ActionCard, CenterLink, Methods, CardTitle } from "../pkg"
 import ory from "../pkg/sdk"
 
+const { publicRuntimeConfig } = getConfig()
+
 interface Props {
   flow?: SettingsFlow
   only?: Methods
@@ -24,8 +27,7 @@ function AppLoginCard({ children }: Props & { children: ReactNode }) {
 
 const Apps: NextPage = () => {
   const router = useRouter()
-  const DefaultHydraUrl =
-    process.env.HYDRA_PUBLIC_URL || "http://localhost:4444"
+  const DefaultHydraUrl = publicRuntimeConfig.hydraPublicUrl
   const { flow: flowId, return_to: returnTo } = router.query
   const [traits, setTraits] = useState<any>()
   const [projects, setProjects] = useState<any>([])

pages/fitbit.tsx

@@ -25,8 +25,6 @@ function AppLoginCard({ children }: Props & { children: ReactNode }) {
 
 const Fitbit: NextPage = () => {
   const router = useRouter()
-  const DefaultHydraUrl =
-    process.env.HYDRA_PUBLIC_URL || "http://localhost:4444"
   const { flow: flowId, return_to: returnTo } = router.query
   const [traits, setTraits] = useState<any>()
   const [projects, setProjects] = useState<any>([])
@@ -80,7 +78,6 @@ const Fitbit: NextPage = () => {
         <CardTitle>App Login</CardTitle>
         <QrForm
           projects={projects}
-          baseUrl={DefaultHydraUrl}
           navigate={handleNavigation}
         />
       </AppLoginCard>
@@ -95,11 +92,10 @@ const Fitbit: NextPage = () => {
 
 interface QrFormProps {
   projects: any[]
-  baseUrl: string
   navigate: any
 }
 
-const QrForm: React.FC<QrFormProps> = ({ projects, baseUrl, navigate }) => {
+const QrForm: React.FC<QrFormProps> = ({ projects, navigate }) => {
   if (projects) {
     return (
       <div className="center">