Authentication ??

[wibb36]

Hi Fernando! great work unifying navigation between both platforms. felicitation!!

Using navigation separately leads me to wonder how you would handle Authentication in general on the client-side with protected routes? then maybe what server solutions do you think fits? ex: Auth0, NextAuth.js, etc?

I'd truly appreciate your feedback.

[nandorojo]

so far I’ve been using Firebase Auth and it’s worked great. I haven’t done any server side auth with it yet (only on the client so far), but I imagine it would be easy to add. On iOS/Android I’m using react-native-firebase.

Update

See the docs for auth here: #39 (comment)

[wibb36]

wow!!! super fast. Do you mean you're using two separate logics with Firebase for web and mobile?

Since we're not using NavigationContainer nor any React Navigation navigator for the web, how would you write something as basic as:

{isAuthorized ? <Stack path='/main-stack' ... /> : <Stack path='/auth-screens' />}

with Next.js for the web and better if cross-platform code.

[nandorojo]

Do you mean you're using two separate logics with Firebase for web and mobile?

Same logic, I just have a single firebase file for each platform, and they each export the firebase function I need, such as signInWithPhoneNumber.

This might help: axeldelafosse/expo-next-monorepo-example#1 (comment)

Also axeldelafosse/expo-next-monorepo-example#1 (comment)

[31ena]

@nandorojo Interesting the approach of using pre-screen blockers and maybe using something as modal(web), bottomSheet(native) when not authenticated. I guess building something similar would be the perfect solution for SEO as well on the web.

What if we have a situation as mentioned above, when we press the hardware back button and not expecting to be able to go back to a previous route (https://something.ext/login route after already being authenticated)? When authenticated, React Navigation makes it impossible to navigate to screens when the user is not authenticated.

[nandorojo]

I think a global modal for both platforms works nicely. If you want you could render a bottom sheet inside the modal on small screens and a dialogue otherwise.

You can also get a nice iOS modal with presentationStyle="formSheet".

[rodbs]

@nandorojo
For Supabase projects which auth methodology do you recommend to use in react-native/nextjs projects (when using OAuth providers)?
I've discovered expo provides an API for Auth. Better to use this API for native and web than trying to configure Supabase's client to do auth in react-native ?
https://docs.expo.dev/versions/latest/sdk/auth-session/

Supabase has an example using email/password but using OAuth not sure if it's that simple (I've played a bit with it doesn't seem trivial dealing with the Google login screen ...)
https://supabase.com/docs/guides/with-expo

I've also found this other library ...
https://github.com/react-native-google-signin/google-signin

What's your opinion? And mostly, what's your opinion about Expo Auth API?
thx!

[nandorojo]

IMO, Expo's OAuth solution is by far the best. In fact, in my experience it's better than any web-only library option out there.

[nandorojo]

I don't know about Supabase in particular though.

[Rychillie]

I'm testing Solito with Supabase and I can say that it's a great combination, I had some difficulties to configure it, but it was due to lack of knowledge, after some research I managed to make a very nice system!

[wibb36]

awesome @Rychillie. Are you using it just for Authentication or everything? I think Fernando is using Firebase just for phone auth if I'm not wrong?

[Rychillie]

@wibb36 I'm using it for everything! I'm creating a complete app with authentication system, payments, everything!

[wibb36]

@Rychillie it would be nice to have example templates, something as with-supabase maybe + Prisma (awesome ORM). @nandorojo maybe another with-firebase and so on for developers who like these options.

Supabase is more of an "all-in-one backend" and it's probably great for creating a quick MVP. While I think it's better to use different services/options for various backend and middleware tasks, this way you let each service does what it does best.

My projects run on top of something similar to Solito starter, named Unirepo (private for now, maybe turning it public one day) where I have an API workspace package that handles all that is middleware and fetching data using SWR, GraphQL, hooks (ex: useUser, useAuth, etc), a Server package using Prisma and PlanetScale, etc

Authentication has to do with navigation, state management, database, and server, so having also an example may be called advanced that has a minimal setup for the services I mentioned above would be a great idea for the Solito community. If you're open to it, I will try to extract what I have with Unirepo and create a pull request when I have some time. let me know!!

[Rychillie]

I will do the following!

I promise you two examples! I'll do two examples in the next few weeks using Supabase, a mini platform like the Supabase examples themselves and another a Blog (because I've been wanting to blog with Solito + Supabase for a while!) As soon as I upload the repositories I share here in this discussion with you!

I'll just wait to spend this weekend because I'm finishing some deliveries but I promise I'll share it with you on the days that dry!

[rodbs]

@Rychillie Are you using/plaining to use supabase with Expo auth methods? On one hand the methods Expo provides look very comprehensive, but on the other I've been looking into it and I find quite difficult to make it work for both native and web.
I've found these resources; not sure f you're aware of:

https://www.youtube.com/watch?v=hmZm_jPvWWM
https://github.com/chelseafarley/google-auth-demo/

https://dev.to/dancurtis/how-to-use-supabase-apple-oauth-in-react-native-4c4h
https://github.com/danielcurtis/supabase-tailwind-rn

https://github.com/supabase/supabase-js/issues/145

[andrewdoro]

@wibb36 how you use SWR for both React-Native and Next.js in the API workspace?

[nandorojo]

@wibb36 how you use SWR for both React-Native and Next.js in the API workspace?

that question seems a bit unrelated to this post. but this is the answer:

axeldelafosse/expo-next-monorepo-example#9 (comment)

this could be a good recipe to add to the docs.

[rodbs]

@Rychillie Any updates on your examples?

[Silthus]

How would I use firebase-emulator in the monorepo?
Initiate it at the root directory or duplicate it across all sub dirs?

[nandorojo]

Hey everyone, I finally got around to this. Here is a guide for using cross-platform authentication with Solito: https://solito.dev/guides/auth

I recommend watching the video and referencing the source code there.

[vjsasinathan]

Below is a sample pattern to integrate Auth0

1. Include Auth0 native dependency in apps/expo
2. Include Auth0 react dependency in apps/next
3. Auth Provider
4. Add Auth Provider
5. Auth Hook
6. Use hook in components

Install Deps:

cd ./apps/expo
yarn add react-native-auth0

cd ./apps/expo
yarn add @auth0/auth0-react

Auth Provider:

cd ./packages/app
mkdir provider && cd provider && mkdir auth && cd auth
touch index.tsx && touch index.web.tsx

./app/proovider/auth/index.tsx

import { Auth0Provider } from 'react-native-auth0'

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <Auth0Provider domain={'AUTH0_DOMAIN'} clientId={'AUTH0_CLIENT_ID'}>
      {children}
    </Auth0Provider>
  )
}

./app/proovider/auth/index.web.tsx

import { Auth0Provider } from '@auth0/auth0-react'

export const AuthProvider = ({
  children,
}: {
  children: React.ReactElement
}) => (
  <Auth0Provider
    domain={'AUTH0_DOMAIN'}
    clientId={'AUTH0_CLIENT_ID'}
    authorizationParams={{
      redirect_uri: 'AUTH0_REDIRECT_URI',
    }}
  >
    {children}
  </Auth0Provider>
)

Add Provider

./packages/app/provider/index.tsx

import { NavigationProvider } from './navigation'
import { SafeArea } from './safe-area'
import { AuthProvider } from 'app/provider/auth'

export function Provider({ children }: { children: React.ReactNode }) {
  return (
    <SafeArea>
      <NavigationProvider>
        <AuthProvider>{children}</AuthProvider>
      </NavigationProvider>
    </SafeArea>
  )
}

Auth Hook:

cd ./packages/app
mkdir hooks && cd hooks && mkdir auth && cd auth
touch index.tsx && touch index.web.tsx

./app/hook/auth/index.tsx

import { useAuth0 } from 'react-native-auth0'

export const useAuth = () => {
  const { authorize, clearSession, user, error, isLoading } = useAuth0()

  return {
    login: async () => {
        try {
            await authorize({scope: 'openid profile email'}, { customScheme: 'APP_CUSTOM_SCHEME' })
        } catch (e) {
            console.log(e)
        }
    },
    signup: () => {
        try {
            await authorize({scope: 'openid profile email', screen_hint: 'signup'}, { customScheme: 'APP_CUSTOM_SCHEME' })
        } catch (e) {
        console.log(e)
        }
    },
    logout: async () => {
      try {
        await clearSession({ customScheme: 'APP_CUSTOM_SCHEME' })
      } catch (e) {
        console.log(e)
      }
    },
    isAuthenticated,
    user,
    error,
    isLoading,
  }
}

./app/hook/auth/index.web.tsx

import { useAuth0 } from '@auth0/auth0-react'

export const useAuth = () => {
const { loginWithRedirect, logout, user, error, isLoading } = useAuth0()

  return {
    login: () => {
        loginWithRedirect()
    },
    signup: () => {
        loginWithRedirect({
            screen_hint: 'signup'
        })
    },
    loginWithGoogle: () => {
        loginWithRedirect({
            connection: 'google-oauth2'
        })
    },
    logout: () => {
        logout({ logoutParams: { returnTo: 'AUTH0_RETURN_URL' } })
    },
    isAuthenticated,
    user,
    error,
    isLoading,
  }
}

Sample Login Button

import { useAuth } from 'app/hooks/auth'
import { Text, Pressable } from 'react-native'

export default function LoginButton({ label = 'Button', onPress = () => {} }) {

    const {login, logout, isAuthenticated, user} = useAuth();

    return isAuthenticated ? (<Pressable onPress={logout}>
        <Text>Click to Logout</Text>
      </Pressable>) : (
      <Pressable onPress={login}>
        <Text>Click to Login</Text>
      </Pressable>
    )
  }

[avb7]

This worked very well. However I was scratching my head for hours as Auth0 doesn't work on Expo Go, only works on the development builds.