commit c474d11c7e82f0fc84321ba720e36b8db910840d · gmstn.systems/gemstone-app

+2 -52

src/components/Auth/Login.tsx

···

       1
       1
       -
       import { oAuthClient } from "@/lib/utils/atproto/oauth";

     

       2
       2
       -
       import { useSetOAuthValue } from "@/providers/OAuthProvider";

     

       3
       3
       -
       import { Agent } from "@atproto/api";

     

       4
       4
       -
       import { useState } from "react";

     

       5
       5
       -
       import { Button, StyleSheet, TextInput, View } from "react-native";

     

       1
       1
       +
       import { Text } from "react-native";

     

       6
       2
        
       

     

       7
       3
        
       export const Login = () => {

     

       8
       8
       -
           const [atprotoHandle, setAtprotoHandle] = useState("");

     

       9
       9
       -
           const setOAuth = useSetOAuthValue();

     

       10
       10
       -
       

     

       11
       11
       -
           const handlePress = async () => {

     

       12
       12
       -
               const session = await oAuthClient.signIn(atprotoHandle);

     

       13
       13
       -
       

     

       14
       14
       -
               const agent = new Agent(session);

     

       15
       15
       -
               if (setOAuth)

     

       16
       16
       -
                   setOAuth({

     

       17
       17
       -
                       session,

     

       18
       18
       -
                       agent,

     

       19
       19
       -
                   });

     

       20
       20
       -
           };

     

       21
       21
       -
       

     

       22
       22
       -
           const handleSubmit = () => {

     

       23
       23
       -
               handlePress()

     

       24
       24
       -
                   .then()

     

       25
       25
       -
                   .catch((e: unknown) => {

     

       26
       26
       -
                       console.log(e);

     

       27
       27
       -
                   });

     

       28
       28
       -
           };

     

       29
       29
       -
       

     

       30
       30
       -
           return (

     

       31
       31
       -
               <View>

     

       32
       32
       -
                   <TextInput

     

       33
       33
       -
                       style={styles.input}

     

       34
       34
       -
                       value={atprotoHandle}

     

       35
       35
       -
                       onChangeText={setAtprotoHandle}

     

       36
       36
       -
                       placeholder="alice.bsky.social"

     

       37
       37
       -
                       onSubmitEditing={handleSubmit}

     

       38
       38
       -
                   />

     

       39
       39
       -
                   <Button title="Log in with your PDS ->" onPress={handleSubmit} />

     

       40
       40
       -
               </View>

     

       41
       41
       -
           );

     

       4
       4
       +
           return <Text>Login not implemented for native yet :(</Text>;

     

       42
       5
        
       };

     

       43
       43
       -
       

     

       44
       44
       -
       const styles = StyleSheet.create({

     

       45
       45
       -
           input: {

     

       46
       46
       -
               flex: 1,

     

       47
       47
       -
               borderWidth: 1,

     

       48
       48
       -
               borderColor: "#ccc",

     

       49
       49
       -
               borderRadius: 8,

     

       50
       50
       -
               paddingHorizontal: 12,

     

       51
       51
       -
               paddingVertical: 8,

     

       52
       52
       -
               marginRight: 8,

     

       53
       53
       -
               fontSize: 16,

     

       54
       54
       -
           },

     

       55
       55
       -
       });

+55

src/components/Auth/Login.web.tsx

···

       1
       1
       +
       import { oAuthClient } from "@/lib/utils/atproto/oauth";

     

       2
       2
       +
       import { useSetOAuthValue } from "@/providers/OAuthProvider";

     

       3
       3
       +
       import { Agent } from "@atproto/api";

     

       4
       4
       +
       import { useState } from "react";

     

       5
       5
       +
       import { Button, StyleSheet, TextInput, View } from "react-native";

     

       6
       6
       +
       

     

       7
       7
       +
       export const Login = () => {

     

       8
       8
       +
           const [atprotoHandle, setAtprotoHandle] = useState("");

     

       9
       9
       +
           const setOAuth = useSetOAuthValue();

     

       10
       10
       +
       

     

       11
       11
       +
           const handlePress = async () => {

     

       12
       12
       +
               const session = await oAuthClient.signIn(atprotoHandle);

     

       13
       13
       +
       

     

       14
       14
       +
               const agent = new Agent(session);

     

       15
       15
       +
               if (setOAuth)

     

       16
       16
       +
                   setOAuth({

     

       17
       17
       +
                       session,

     

       18
       18
       +
                       agent,

     

       19
       19
       +
                   });

     

       20
       20
       +
           };

     

       21
       21
       +
       

     

       22
       22
       +
           const handleSubmit = () => {

     

       23
       23
       +
               handlePress()

     

       24
       24
       +
                   .then()

     

       25
       25
       +
                   .catch((e: unknown) => {

     

       26
       26
       +
                       console.log(e);

     

       27
       27
       +
                   });

     

       28
       28
       +
           };

     

       29
       29
       +
       

     

       30
       30
       +
           return (

     

       31
       31
       +
               <View>

     

       32
       32
       +
                   <TextInput

     

       33
       33
       +
                       style={styles.input}

     

       34
       34
       +
                       value={atprotoHandle}

     

       35
       35
       +
                       onChangeText={setAtprotoHandle}

     

       36
       36
       +
                       placeholder="alice.bsky.social"

     

       37
       37
       +
                       onSubmitEditing={handleSubmit}

     

       38
       38
       +
                   />

     

       39
       39
       +
                   <Button title="Log in with your PDS ->" onPress={handleSubmit} />

     

       40
       40
       +
               </View>

     

       41
       41
       +
           );

     

       42
       42
       +
       };

     

       43
       43
       +
       

     

       44
       44
       +
       const styles = StyleSheet.create({

     

       45
       45
       +
           input: {

     

       46
       46
       +
               flex: 1,

     

       47
       47
       +
               borderWidth: 1,

     

       48
       48
       +
               borderColor: "#ccc",

     

       49
       49
       +
               borderRadius: 8,

     

       50
       50
       +
               paddingHorizontal: 12,

     

       51
       51
       +
               paddingVertical: 8,

     

       52
       52
       +
               marginRight: 8,

     

       53
       53
       +
               fontSize: 16,

     

       54
       54
       +
           },

     

       55
       55
       +
       });

+32

src/lib/utils/atproto/oauth.ts

···

       1
       1
       +
       import { isDevMode } from "@/lib/utils/env";

     

       2
       2
       +
       import type {

     

       3
       3
       +
           AuthorizeOptions,

     

       4
       4
       +
           OAuthClient,

     

       5
       5
       +
           OAuthSession,

     

       6
       6
       +
       } from "@atproto/oauth-client";

     

       7
       7
       +
       import type {

     

       8
       8
       +
           ExpoOAuthClientOptions} from "@atproto/oauth-client-expo";

     

       9
       9
       +
       import {

     

       10
       10
       +
           ExpoOAuthClient as PbcNativeExpoOAuthClient,

     

       11
       11
       +
       } from "@atproto/oauth-client-expo";

     

       12
       12
       +
       import oAuthMetadata from "../../../../assets/oauth-client-metadata.json";

     

       13
       13
       +
       

     

       14
       14
       +
       // suuuuuch a hack holy shit

     

       15
       15
       +
       export type TypedExpoOAuthClient = new (

     

       16
       16
       +
           options: ExpoOAuthClientOptions,

     

       17
       17
       +
       ) => TypedExpoOAuthClientInstance;

     

       18
       18
       +
       

     

       19
       19
       +
       export interface TypedExpoOAuthClientInstance extends OAuthClient {

     

       20
       20
       +
           signIn(signIn: string, options?: AuthorizeOptions): Promise<OAuthSession>;

     

       21
       21
       +
           handleCallback(): Promise<null | OAuthSession>;

     

       22
       22
       +
       }

     

       23
       23
       +
       

     

       24
       24
       +
       // i cast type magic

     

       25
       25
       +
       const ExpoOAuthClient =

     

       26
       26
       +
           PbcNativeExpoOAuthClient as unknown as TypedExpoOAuthClient;

     

       27
       27
       +
       

     

       28
       28
       +
       export const oAuthClient = new ExpoOAuthClient({

     

       29
       29
       +
           // @ts-expect-error funky wunky with typey wypies

     

       30
       30
       +
           clientMetadata: isDevMode ? undefined : oAuthMetadata,

     

       31
       31
       +
           handleResolver: "https://bsky.social",

     

       32
       32
       +
       });

+23 -13

src/lib/utils/atproto/oauth.web.ts

···

       5
       5
        
           OAuthSession,

     

       6
       6
        
       } from "@atproto/oauth-client-browser";

     

       7
       7
        
       import type { ExpoOAuthClientOptions } from "@atproto/oauth-client-expo";

     

       8
       8
       -
       import { ExpoOAuthClient as PbcExpoOAuthClient } from "@atproto/oauth-client-expo";

     

       8
       8
       +
       import { ExpoOAuthClient as PbcWebExpoOAuthClient } from "@atproto/oauth-client-expo";

     

       9
       9
        
       import oAuthMetadata from "../../../../assets/oauth-client-metadata.json";

     

       10
       10
        
       

     

       11
       11
        
       // suuuuuch a hack holy shit

     
···

       19
       19
        
       }

     

       20
       20
        
       

     

       21
       21
        
       // i cast type magic

     

       22
       22
       -
       const ExpoOAuthClient = PbcExpoOAuthClient as unknown as TypedExpoOAuthClient;

     

       22
       22
       +
       const ExpoOAuthClient = PbcWebExpoOAuthClient as unknown as TypedExpoOAuthClient;

     

       23
       23
        
       

     

       24
       24
        
       export const oAuthClient = new ExpoOAuthClient({

     

       25
       25
        
           // @ts-expect-error funky wunky with typey wypies

     
···

       27
       27
        
           handleResolver: "https://bsky.social",

     

       28
       28
        
       });

     

       29
       29
        
       

     

       30
       30
       -
       const result = await oAuthClient.init();

     

       31
       31
       -
       

     

       32
       32
       -
       if (result && isDevMode) {

     

       33
       33
       -
           const { session, state } = result;

     

       34
       34
       -
           if (state != null) {

     

       35
       35
       -
               console.log(

     

       36
       36
       -
                   `${session.sub} was successfully authenticated (state: ${state})`,

     

       30
       30
       +
       oAuthClient

     

       31
       31
       +
           .init()

     

       32
       32
       +
           .then((result) => {

     

       33
       33
       +
               if (result && isDevMode) {

     

       34
       34
       +
                   const { session, state } = result;

     

       35
       35
       +
                   if (state != null) {

     

       36
       36
       +
                       console.log(

     

       37
       37
       +
                           `${session.sub} was successfully authenticated (state: ${state})`,

     

       38
       38
       +
                       );

     

       39
       39
       +
                   } else {

     

       40
       40
       +
                       console.log(

     

       41
       41
       +
                           `${session.sub} was restored (last active session)`,

     

       42
       42
       +
                       );

     

       43
       43
       +
                   }

     

       44
       44
       +
               }

     

       45
       45
       +
           })

     

       46
       46
       +
           .catch((err: unknown) => {

     

       47
       47
       +
               console.error(

     

       48
       48
       +
                   "something went wrong when trying to init the oauth client.",

     

       37
       49
        
               );

     

       38
       38
       -
           } else {

     

       39
       39
       -
               console.log(`${session.sub} was restored (last active session)`);

     

       40
       40
       -
           }

     

       41
       41
       -
       }

     

       50
       50
       +
               console.error(err);

     

       51
       51
       +
           });