diff --git a/apps/mobile/src/App.tsx b/apps/mobile/src/App.tsx index a8ca8d1c9..64f53b630 100644 --- a/apps/mobile/src/App.tsx +++ b/apps/mobile/src/App.tsx @@ -40,6 +40,7 @@ import { changeTwTheme, tw } from './lib/tailwind'; import RootNavigator from './navigation'; import OnboardingNavigator from './navigation/OnboardingNavigator'; import { P2P } from './screens/p2p/P2P'; +import { AUTH_SERVER_URL } from './utils'; import { currentLibraryStore } from './utils/nav'; LogBox.ignoreLogs(['Sending `onAnimatedValueUpdate` with no listeners registered.']); @@ -158,7 +159,7 @@ export default function App() { global.Intl = require('intl'); require('intl/locale-data/jsonp/en'); //TODO(@Rocky43007): Setup a way to import all the languages we support, once we add localization on mobile. SuperTokens.init({ - apiDomain: 'http://localhost:9420', + apiDomain: AUTH_SERVER_URL, apiBasePath: '/api/auth' }); SplashScreen.hideAsync(); diff --git a/apps/mobile/src/components/overview/Devices.tsx b/apps/mobile/src/components/overview/Devices.tsx index f11e24d34..a7cfb50cc 100644 --- a/apps/mobile/src/components/overview/Devices.tsx +++ b/apps/mobile/src/components/overview/Devices.tsx @@ -92,7 +92,7 @@ const Devices = ({ node, stats }: Props) => { }, [node]); return ( - + { connectionType={null} /> )} - {/* {devices.data?.map((device) => ( + {devices.data?.map((device) => ( { color="#0362FF" connectionType={'cloud'} /> - ))} */} + ))} (null); useEffect(() => { async function _() { - const user_data = await fetch('http://localhost:9420/api/user', { + const user_data = await fetch(`${AUTH_SERVER_URL}/api/user`, { method: 'GET' }); const data = await user_data.json(); diff --git a/apps/mobile/src/screens/settings/client/AccountSettings/AccountLogin.tsx b/apps/mobile/src/screens/settings/client/AccountSettings/AccountLogin.tsx index 0c0884b74..19bfe2374 100644 --- a/apps/mobile/src/screens/settings/client/AccountSettings/AccountLogin.tsx +++ b/apps/mobile/src/screens/settings/client/AccountSettings/AccountLogin.tsx @@ -32,75 +32,75 @@ const AccountLogin = () => { const [activeTab, setActiveTab] = useState<'Login' | 'Register'>('Login'); // FIXME: Currently opens in App. - const socialLoginHandlers = (name: SocialLogin['name']) => { - return { - Github: async () => { - try { - const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({ - thirdPartyId: 'github', + // const socialLoginHandlers = (name: SocialLogin['name']) => { + // return { + // Github: async () => { + // try { + // const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({ + // thirdPartyId: 'github', - // This is where Github should redirect the user back after login or error. - frontendRedirectURI: 'http://localhost:9420/api/auth/callback/github' - }); + // // This is where Github should redirect the user back after login or error. + // frontendRedirectURI: 'http://localhost:9420/api/auth/callback/github' + // }); - // we redirect the user to Github for auth. - window.location.assign(authUrl); - } catch (err: any) { - if (err.isSuperTokensGeneralError === true) { - // this may be a custom error message sent from the API by you. - toast.error(err.message); - } else { - toast.error('Oops! Something went wrong.'); - } - } - }, - Google: async () => { - try { - const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({ - thirdPartyId: 'google', + // // we redirect the user to Github for auth. + // window.location.assign(authUrl); + // } catch (err: any) { + // if (err.isSuperTokensGeneralError === true) { + // // this may be a custom error message sent from the API by you. + // toast.error(err.message); + // } else { + // toast.error('Oops! Something went wrong.'); + // } + // } + // }, + // Google: async () => { + // try { + // const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({ + // thirdPartyId: 'google', - // This is where Google should redirect the user back after login or error. - // This URL goes on the Google's dashboard as well. - frontendRedirectURI: 'http://localhost:9420/api/auth/callback/google' - }); + // // This is where Google should redirect the user back after login or error. + // // This URL goes on the Google's dashboard as well. + // frontendRedirectURI: 'http://localhost:9420/api/auth/callback/google' + // }); - /* - Example value of authUrl: https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&access_type=offline&include_granted_scopes=true&response_type=code&client_id=1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com&state=5a489996a28cafc83ddff&redirect_uri=https%3A%2F%2Fsupertokens.io%2Fdev%2Foauth%2Fredirect-to-app&flowName=GeneralOAuthFlow - */ + // /* + // Example value of authUrl: https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&access_type=offline&include_granted_scopes=true&response_type=code&client_id=1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com&state=5a489996a28cafc83ddff&redirect_uri=https%3A%2F%2Fsupertokens.io%2Fdev%2Foauth%2Fredirect-to-app&flowName=GeneralOAuthFlow + // */ - // we redirect the user to google for auth. - window.location.assign(authUrl); - } catch (err: any) { - if (err.isSuperTokensGeneralError === true) { - // this may be a custom error message sent from the API by you. - toast.error(err.message); - } else { - toast.error('Oops! Something went wrong.'); - } - } - }, - Apple: async () => { - try { - const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({ - thirdPartyId: 'apple', + // // we redirect the user to google for auth. + // window.location.assign(authUrl); + // } catch (err: any) { + // if (err.isSuperTokensGeneralError === true) { + // // this may be a custom error message sent from the API by you. + // toast.error(err.message); + // } else { + // toast.error('Oops! Something went wrong.'); + // } + // } + // }, + // Apple: async () => { + // try { + // const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({ + // thirdPartyId: 'apple', - // This is where Apple should redirect the user back after login or error. - frontendRedirectURI: 'http://localhost:9420/api/auth/callback/apple' - }); + // // This is where Apple should redirect the user back after login or error. + // frontendRedirectURI: 'http://localhost:9420/api/auth/callback/apple' + // }); - // we redirect the user to Apple for auth. - window.location.assign(authUrl); - } catch (err: any) { - if (err.isSuperTokensGeneralError === true) { - // this may be a custom error message sent from the API by you. - toast.error(err.message); - } else { - toast.error('Oops! Something went wrong.'); - } - } - } - }[name](); - }; + // // we redirect the user to Apple for auth. + // window.location.assign(authUrl); + // } catch (err: any) { + // if (err.isSuperTokensGeneralError === true) { + // // this may be a custom error message sent from the API by you. + // toast.error(err.message); + // } else { + // toast.error('Oops! Something went wrong.'); + // } + // } + // } + // }[name](); + // }; return ( diff --git a/apps/mobile/src/screens/settings/client/AccountSettings/AccountProfile.tsx b/apps/mobile/src/screens/settings/client/AccountSettings/AccountProfile.tsx index 2a0599e3c..9f670227b 100644 --- a/apps/mobile/src/screens/settings/client/AccountSettings/AccountProfile.tsx +++ b/apps/mobile/src/screens/settings/client/AccountSettings/AccountProfile.tsx @@ -1,16 +1,19 @@ +import { useNavigation } from '@react-navigation/native'; import { Envelope } from 'phosphor-react-native'; import { useEffect, useState } from 'react'; import { Text, View } from 'react-native'; import Card from '~/components/layout/Card'; import ScreenContainer from '~/components/layout/ScreenContainer'; +import { Button } from '~/components/primitive/Button'; import { tw } from '~/lib/tailwind'; -import { User } from '~/navigation/tabs/SettingsStack'; +import { SettingsStackScreenProps, User } from '~/navigation/tabs/SettingsStack'; +import { AUTH_SERVER_URL } from '~/utils'; const AccountProfile = () => { const [userInfo, setUserInfo] = useState(null); useEffect(() => { async function _() { - const user_data = await fetch('http://localhost:9420/api/user', { + const user_data = await fetch(`${AUTH_SERVER_URL}/api/user`, { method: 'GET' }); const data = await user_data.json(); @@ -26,6 +29,14 @@ const AccountProfile = () => { const emailName = userInfo ? userInfo.email.split('@')[0] : ''; const capitalizedEmailName = (emailName?.charAt(0).toUpperCase() ?? '') + emailName?.slice(1); + const navigator = useNavigation['navigation']>(); + function signOut() { + fetch(`${AUTH_SERVER_URL}/api/auth/signout`, { + method: 'POST' + }).then(() => { + navigator.navigate('AccountLogin'); + }); + } return ( @@ -48,6 +59,10 @@ const AccountProfile = () => { {userInfo ? userInfo.email : ''} + + diff --git a/apps/mobile/src/screens/settings/client/AccountSettings/Login.tsx b/apps/mobile/src/screens/settings/client/AccountSettings/Login.tsx index b1788772f..913301b8a 100644 --- a/apps/mobile/src/screens/settings/client/AccountSettings/Login.tsx +++ b/apps/mobile/src/screens/settings/client/AccountSettings/Login.tsx @@ -1,3 +1,4 @@ +import AsyncStorage from '@react-native-async-storage/async-storage'; import { useNavigation } from '@react-navigation/native'; import { useState } from 'react'; import { Controller } from 'react-hook-form'; @@ -9,6 +10,7 @@ import { Input } from '~/components/primitive/Input'; import { toast } from '~/components/primitive/Toast'; import { tw } from '~/lib/tailwind'; import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; +import { AUTH_SERVER_URL } from '~/utils'; import ShowPassword from './ShowPassword'; @@ -18,7 +20,7 @@ async function signInClicked( navigator: SettingsStackScreenProps<'AccountProfile'>['navigation'] ) { try { - const req = await fetch('http://localhost:9420/api/auth/signin', { + const req = await fetch(`${AUTH_SERVER_URL}/api/auth/signin`, { method: 'POST', headers: { 'Content-Type': 'application/json; charset=utf-8' @@ -67,6 +69,8 @@ async function signInClicked( // sign in successful. The session tokens are automatically handled by // the frontend SDK. toast.success('Sign in successful'); + // Save the access token to AsyncStorage, because SuperTokens doesn't store it correctly. Thanks to the React Native SDK. + await AsyncStorage.setItem('access_token', req.headers.get('st-access-token')!); // Refresh the page to show the user is logged in navigator.navigate('AccountProfile'); } @@ -104,19 +108,21 @@ const Login = () => { control={form.control} name="email" render={({ field }) => ( - + + + {form.formState.errors.email && ( + + {form.formState.errors.email.message} + + )} + )} /> - {form.formState.errors.email && ( - - {form.formState.errors.email.message} - - )} { onChangeText={field.onChange} secureTextEntry={!showPassword} /> + {form.formState.errors.password && ( + + {form.formState.errors.password.message} + + )} { )} /> - {form.formState.errors.password && ( - - {form.formState.errors.password.message} - - )}